JavaScript DOM元素对象属性与方法详解

作者：小圆点时间：2026-10-30 15:51:52浏览：76

本文详细解析JavaScript中DOM元素对象的常用属性与方法。涵盖NodeList的动态特性、通用属性（如id、innerHTML、offset系列）及专属属性，并深入讲解节点增删改查（appendChild、insertBefore等）与属性操作（getAttribute、setAttribute）的具体用法与注意事项，帮助开发者高效掌握DOM编程核心技能。

DOM节点基础概念

在HTML文档对象模型（DOM）中，文档的每个组成部分均被视为节点。

节点是构成DOM结构的最基本单元，每一个HTML标签都对应DOM中的一个节点。

整个文档本身被视为一个文档节点。

所有的HTML元素均被归类为元素节点。

所有的HTML属性被归类为属性节点。

插入到HTML元素中的文本内容构成文本节点。

HTML中的注释内容被视为注释节点。

最基础的节点类型是Node类型，其他所有节点类型均继承自Node。由于DOM操作通常是JavaScript中开销最大的部分，而NodeList引发的性能问题最为常见。需要特别注意：NodeList具有“动态”特性，即每次访问NodeList对象时，浏览器都会重新执行一次查询。尽管这增加了计算开销，但能确保新添加的节点也能在NodeList中被访问到。

DOM元素通用属性详解

所有元素节点都拥有共用的属性和方法，下面将逐一详细介绍。

首先介绍较为常用的通用属性。

1. element.id：用于设置或返回元素的id属性值。

2. element.innerHTML：用于设置或返回元素的内容，该值可包含节点内的子标签及文本内容。

3. element.innerText：用于设置或返回元素的内容，该值不包含节点内的子标签，仅返回可见文本。

4. element.className：用于设置或返回元素的class类名。

5. element.nodeName：返回该节点的大写字母形式的标签名。

6. element.nodeType：返回该节点的节点类型，例如1表示元素节点，2表示属性节点等。

7. element.nodeValue：返回该节点的值，对于元素节点，该属性值通常为null。

8. element.childNodes：返回包含元素所有子节点的NodeList对象。NodeList类似于数组，拥有length属性，可以通过方括号[index]访问指定索引的值，也可以使用item(index)方法。但需注意，NodeList并非真正的数组对象。

9. element.firstChild / element.lastChild：分别返回元素的第一个或最后一个子节点，注意这包含注释节点和文本节点。

10. element.parentNode：返回该节点的父节点。

11. element.previousSibling：返回与当前节点同级的上一个节点，同样包含注释节点和文本节点。

12. element.nextSibling：返回与当前节点同级的下一个节点，同样包含注释节点和文本节点。

13. element.childElementCount：返回子元素的数量，该计数不包括文本节点和注释节点。

14. element.firstElementChild / lastElementChild：分别返回第一个或最后一个子元素，不包括文本节点和注释节点。

15. element.previousElementSibling / nextElementSibling：分别返回前一个或后一个兄弟元素，不包括文本节点和注释节点。

16. element.clientHeight / clientWidth：返回内容的可视高度或宽度，计算时不包括边框、外边距或滚动条。

17. element.offsetHeight / offsetWidth / offsetLeft / offsetTop：分别返回元素的高度、宽度、相对于父元素的左偏移量和上偏移量。这些值包括边框和内边距（padding），但不包括外边距（margin）。

18. element.style：用于设置或返回元素的样式属性。例如：element.style.backgroundColor。需要注意的是，与CSS语法不同，JavaScript中style属性的名称需去掉横杠，且第二个单词的首字母必须大写。

19. element.tagName：返回元素的大写形式标签名。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px solid rebeccapurple;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>

</head>


<body>
  <form id='first_form' class="form_style" name="cangjingge" >
    请选择功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠请三思！！！</p><!--注释标签-->
  <p>推荐功法--&gt;葵花宝典</p>

  <script>
    //js演示代码请添加至此
    var a=document.getElementById('first_form'),
      b = document.getElementsByTagName('p')[0];

    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);

  </script>

</body>


</html>

浏览器显示结果如图所示。

DOM节点基础概念

DOM元素专属属性

此外，某些属性是特定标签独有的。

专属属性指专属于某种HTML标签的属性。例如，<a>标签拥有href和target属性；<img>标签拥有src属性；<form>标签拥有enctype以及action属性等。

a_element.href：用于返回当前节点指向的超链接地址。

DOM元素常用操作方法

接下来介绍较为常用的通用方法。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>

</head>


<body>
  <form id='first_form' class="form_style" name="cangjingge" >
    请选择功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠请三思！！！</p>

  <script>
    //js演示代码请添加至此
    
  </script>

</body>


</html>

以下所有JavaScript演示代码均基于本文档提供的示例HTML代码进行实验。

1. element.appendChild(nodeName)：用于向元素添加新的子节点，并将其作为最后一个子节点，同时返回该新子节点。若需向HTML DOM添加新元素，首先必须创建该元素，然后将其追加到已有的父元素上。

JavaScript演示代码如下：


var a=document.getElementById('first_form');   
var textnode=document.createTextNode("慎重选择");  
a.appendChild(textnode)

2. element.getAttribute(para)：用于返回元素节点上指定属性的值。

JavaScript演示代码如下：


var a=document.getElementById('first_form');
console.log(a.getAttribute('name'))      //控制台输出name的值

3. element.getAttributeNode(para)：用于返回指定的属性节点对象。

JavaScript演示代码如下：


var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //控制台输出name属性节点

4. element.getElementsByTagName(para)：用于返回拥有指定标签名的所有子元素的集合（NodeList）。

JavaScript演示代码如下：


var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //控制台输出

5. element.hasAttribute(para)：如果元素拥有指定属性，则返回true，否则返回false。

JavaScript演示代码如下：


var a=document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //控制台输出

6. element.insertBefore(insertNode, appointedNode)：用于在指定的已有子节点之前插入新节点。

JavaScript演示代码如下：


var a=document.getElementById('first_form');
    var inputList=document.getElementsByTagName('input');
    var newNode=document.createElement('input');
    var newNode2=document.createTextNode('天马流星拳');
    var br=document.createElement('br');
    newNode.type='radio';
    newNode.name='gongfa';
    newNode.value='tmlxq';
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);

7. element.removeAttribute()：用于从元素中移除指定属性。

JavaScript示例代码如下：


var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))

8. element.removeChild()：用于从元素中移除子节点。需要注意的是，被移除的节点虽然不再存在于文档树中，但仍保留在内存中，随时可以被再次引用。

JavaScript示例代码如下：


var a=document.getElementById('first_form');
    a.removeChild(a.childNodes[3]);

9. element.replaceChild(newNode, replaceNode)：用于将指定节点替换为新节点。

10. element.setAttribute(attrName, attrValue)：用于将指定属性设置或更改为指定值。

JavaScript示例代码如下：


var a=document.getElementById('first_form');
    a.setAttribute('name','shaolinsi');
    console.log(a.name)

11. element.setAttributeNode()：用于修改指定的属性节点。

JavaScript示例代码如下：


var a=document.getElementById('first_form');
    var attr = document.createAttribute('id');
    attr.value='the_first';
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

12. nodelist.item()：用于返回NodeList中位于指定下标的节点。

JavaScript示例代码如下：


var a=document.getElementsByTagName('input')
console.log(a.item(2))

以上就是JavaScript基础中DOM元素对象属性与方法详解的全部内容，希望大家多多支持本站。

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09