JavaScript 操作HTML DOM元素

小灰灰 2021-09-14 02:18 652阅读 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 DOM页面元素操作

相关 HTML-JavaScript操作DOM对象

相关 JavaScript HTML DOM

相关 JavaScript HTML DOM

相关 JavaScript 操作HTML DOM元素

相关 JavaScript HTML DOM removeChild删除子元素