JavaScript 操作HTML DOM元素

小灰灰 2021-09-14 02:18 541阅读 0赞

**DOM概念**

DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

可以通过浏览器的开发者工具进行观察DOM。

![SouthEast][]

可以看出，整个文档是由一系列节点对象所组成的一棵树，节点（Node）包括元素节点（1表示）、属性节点（2表示）和文本节点（3表示）。

以下例子均以此表格为例说明：

获取元素节点

window.οnlοad=function () {
              var sex=document.getElementById('sex');
              alert(sex.nodeType);
              alert(sex.nodeName);
              alert(sex.nodeValue)
     }

sex代表一个元素节点（nodeType=1），nodeName就是节点标签名（th）,元素节点的nodeValue=null；

获取属性节点

var attr=sex.getAttributeNode('name'); //获取属性节点
       alert(attr.nodeType);
       alert(attr.nodeName);
       alert(attr.nodeValue);

getAttributeNode方法是获取元素的属性节点，此时输出的节点类型为属性节点（2），节点名就是属性名（name），节点值就是属性值（sex）.

获取文本节点

var text=sex.firstChild;   //获取文本节点
      alert(text.nodeType);
      alert(text.nodeName);
      alert(text.nodeValue);

text是一个文本节点（3），节点名称固定是\#text，节点值就是文本内容。

**JavaScript获取DOM元素方法**

（1）getElementById("id")：根据元素的ID属性来获取元素，获取到的是单独的一个元素。

（2）getElementsByTagName("标签名")：根据标签名来获取元素，获取到的是一个元素的集合，也可看成一个数组，里面是若干个相同的标签元素，若想通过此方法获取到某个单独的标签元素，需在后面注明下标，下标从0开始，也即是第一个元素。此方法获取元素是按从上到下依次获取，形成一个集合。

实例：

（3）getElementsByClassName("类名")：此方法根据class属性名来获取元素，跟Tagname一样，它获取到的也是一个元素的集合，需具体获取某个元素，在后面加上下标即可。

（4）getElementsByName("name名称")：此方法根据name属性名来获取元素，获取到的也是一个元素的集合，获取单个元素方法同上。  
  
**JavaScript修改DOM元素**

（1）修改内容：通过innerText或者innerHTML方法可以修改元素内容，但是两者是有区别的。

innerHTML会按照HTML的规则去解析文本内容，而innerText只是当做文本处理。

（2）修改样式：

①获取到的元素.style.样式名称=值

②通过修改元素的类名来修改样式。

实例：

②方法比①方法更实用，因为当要修改多个样式的时候，①方法要写很多代码，而②方法一句话就够了，因为类名里可以定义若干种样式。

[SouthEast]: /images/20210724/44b1227cf30e4dcfb949d034ec416df6.png

JavaScript 操作HTML DOM元素

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM 节点元素操作

相关 JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

相关 JavaScript学习手册十三：HTML DOM——文档元素的操作（一)

相关 JavaScript HTML DOM 元素（节点）

相关 JavaScript HTML DOM

相关 JavaScript DOM页面元素操作

相关 HTML-JavaScript操作DOM对象

相关 JavaScript HTML DOM

相关 JavaScript 操作HTML DOM元素

相关 JavaScript HTML DOM removeChild删除子元素