js 获取 html标签

1、新建一个html文件，命名为testhtml。

2、在testhtml文件内，创建一个div模块，并设置其id属性为mydiv，用于下面使用js获得标签对象。

3、在testhtml文件内，在div标签内，填写一段文字，并加入一个span标签。

4、在testhtml文件内，创建一个button按钮，按钮名称为“获取html”。

5、给button绑定onclick点击事件，当按钮被点击时，执行myfun()函数。

6、在testhtml文件内，在js标签内，创建myfun（）函数，在函数内，使用getElementById（）方法获得div对象，通过innerHMTL属性获得div内的html内容，最后，使用alert方法将获得的html内容以d窗形式显示

7、在浏览器打开testhtml文件，点击按钮，查看获得的html标签内容。

有一定的JS基础后，就可以进入 dom 环节了，dom使得网页的交互效果得到完美呈现，可以说dom真正打开了网页和用户之间的通道桥梁，日常生活中我们点击鼠标，敲击键盘，甚至于无意间触碰到屏幕（触摸屏），都会或多或少或大或小的得到一些躲藏起来的内容。

打开淘宝，在输入框输入商品时，下拉的推荐商品：

或是当打开某个不想再浏览的网页时，右上角的那个×：

这些大部分都存在DOM的身影。

这里的“DOM”，通常来讲，叫做 DOM 文档对象模型 ， 通过 *** 纵DOM，可以随意更改内容，样式，或者增删改查 ，因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分，BOM 就是 window对象 ，DOM 就是 document（文档）对象。

如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。比如：的src属性：

任由我们怎么去修饰的显示，但它本身的路径属性是独有的，所以我们可以直接获取：

更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了，这里列举几个方法：

getElementById()方法，根据元素的id属性值来获取指定的元素，因为ID的唯一性，使得该方法需要搭配ID选择器使用，如果网页里ID重复时，它会获取第一个：

getElementsByTagName()方法，根据元素的标签名获取所有该元素，该方法获取的是所有该标签的元素，以伪数组的形式呈现：

getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素，该方法获取的途径是标签的类，也就是class属性，由于拥有该属性的标签可能不只一个，所以该方法获得的也是一个伪数组（还有，可以看方法名，凡是带Elements的大多数都是伪数组）：

getElementsByName()方法，根据元素的name属性值获取所有该元素，相同的性质，有name属性的标签也不少：

querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素，这个方法就比较常用了，而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了，可以多多考虑用他了该方法是  ES6新增，无论是ID 还是class都可以选，但是和上面区别的是选ID时前面要加#号，选class时前面要加“”：

区别于Elements，这里是个单数，所以只会获取一个，要是想获取多个相同的，就用querySelectorAll()吧！querySelectorAll()看这个ALL就知道它是用来选全部的：

最后这俩方法更实用，可以选取CSS几乎所有选择器，而且querySelectorAll()得到的数组数据后还可以使用数组的方法。

*** 作DOM的样式 ，有多种方式：

通过style属性直接设置

通过className属性设置类选择器

也可以通过classList属性添加多个类选择器

*** 作DOM的内容：

innerText属性，用于获取 和 *** 作 DOM的文本内容。

innerHTML属性，用于获取 和 *** 作 DOM的HTML内容：

createElement()方法，用于创建DOM元素：

appendChild()方法，用于在当前DOM元素中添加子元素：

自删 remove()方法，是元素删除自己:

通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素:

使用场景，牌匾文字上的公司名要根据字数多少自动变大变小，要先拿到文字内容

html：

<div class="head-h1" ref="company_name" >{{datascompany_name}}</div>

js：当页面刚加载完，通过接口获取{{datascompany_name}}的值，要对里面的值编辑时

this$refscompany_name  拿不到值

解决办法：

接口响应完，this$nextTick()方法里面 *** 作DOM，它才能接收到DOM更新的值

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this$nextTick(_=>{

        。。。。

            this$refs company_name

})

在IE8以下版本中,当用户在innerHtml_test1 的文本框中输入, 单击 button innerHtml_test2 中会正常获取 innerHtml_test1 的数据的结果 , 而 ff 及 ie8以上版本,则innerHtml_test2 可以取得 innerHtml_test1 的html代码格式, 但却无法取到用户输入到文本框中的值;

解决方案 ,使用属性设置 , setAttribute

1、call和apply

二者都可以改变当前的this，区别在于apply方法要将参数放入数组中再传参

2、函数的继承

function Fclass(name, age){

thisname = name;

thisage = age;

}

FclassprototypeshowName = function(){

alert(thisname);

}

FclassprototypeshowAge = function(){

alert(thisage);

}

3、子类

function Sclass(name, age, job){

// 调用父类的call方法并传入子类的this，可实现属性的继承

Fclasscall(this,name,age);

thisjob = job;

}

// 方法继承：将父类的一个实例赋值给子类的继承

Sclassprototype = new Fclass();

SclassprototypeshowJob = function(){

alert(thisjob);

}

var Driver = new Sclass('tom',18,'老司机');

DrivershowName();

DrivershowAge();

DrivershowJob();

4、新增选择器

documentquerySlector()    选择一个

documentquerySlectorAll()   选择一类

jQuery加载：

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery有ready方法解决

//JS写法

windowonload = function(){

var div = documentgetElementById('div');

alert(divinnerHTML);

}

//JQ写法

$(document)ready(function() {

var $div = $('#div');

alert('jquery:' + $divhtml());

})

//简写

$(function(){

var $div = $('#div');

alert('jquery:' + $divhtml());

})

5、jQuery选择器：

$(document) //选择整个文档对象

$('li') //选择所有的li元素

$('#myId') //选择id为myId的网页元素

$('myClass') // 选择class为myClass的元素

$('input[name=first]') // 选择name属性等于first的input元素

$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li

$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行

$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li

$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

对选择集进行函数过滤

$('div')has('p'); // 选择包含p元素的div元素

$('div')not('myClass'); //选择class不等于myClass的div元素

$('div')filter('myClass'); //选择class等于myClass的div元素

$('div')first(); //选择第1个div元素

$('div')eq(5); //选择第6个div元素

6、选择集转移

$('div')prev('p'); //选择div元素前面的第一个p元素

$('div')prevAll('p'); //选择div元素前面所有的p元素

$('div')next('p'); //选择div元素后面的第一个p元素

$('div')nextAll('p'); //选择div元素后面所有的p元素

$('div')closest('form'); //选择离div最近的那个form父元素

$('div')parent(); //选择div的父元素

$('div')children(); //选择div的所有子元素

$('div')siblings(); //选择div的同级元素

$('div')find('myClass'); //选择div内的class等于myClass的元素

jQuery样式 *** 作：

//读取样式

alert($('div1')css('fontSize'));

//设置样式

$('div1')css({background:'gold'});

//增加行间样式

$('div1')addClass('big');

//减少行间样式，多个样式用空格分开

$('div1')removeClass('div1');

7、click事件

$('#btn')click(function(){

$('box')toggleClass('sty');  //切换样式

});

jQuery索引值：

$('list li')click(function(){

// alert(thisinnerHTML);

// alert($(this)html());

alert($(this)index());

});

jQuery属性 *** 作：

html()

// 取出html内容

var $htm = $('#div1')html();

// 设置html内容

$('#div1')html('<span>添加文字</span>');

text()

// 取出文本内容

var $htm = $('#div1')text();

// 设置文本内容

$('#div1')text('<span>添加文字</span>');

attr():

// 取出的地址

var $src = $('#img1')attr('src');

// 设置的地址和alt属性

$('#img1')attr({ src: "testjpg", alt: "Test Image" });

jQuery特殊效果：

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素

show() 显示元素

toggle() 依次展示或隐藏某个元素

slideDown() 向下展开

slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

jQuery链式调用

$('#div1') // id为div1的元素

children('ul') //该元素下面的ul子元素

slideDown('fast') //高度从零变到实际高度来显示ul元素

parent()  //跳到ul的父元素，也就是id为div1的元素

siblings()  //跳到div1元素平级的所有兄弟元素

children('ul') //这些兄弟元素中的ul子元素

slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

以上就是关于js 获取 html标签全部的内容，包括:js 获取 html标签、DOM的理解与 *** 作、vue 无法获取DOM的innerHtml等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！