获取和操作 DOM 节点

获取和操作 DOM 节点

DOM 节点也会被称为 DOM 元素。

 

想要操作 DOM 节点，就必须先获取到 DOM 节点。

 

1. 获取 DOM 节点

获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：

 

element.getElementById

element.getElementByName

element.getElementsByTagName

element.getElementsByClassName

element.querySelector

element.querySelectorAll

1.1 element.getElementById

返回对拥有指定 id 的第一个对象的引用。

 

element.getElementById 是指去 element 节点下根据 id 查找子节点。

 

通常在程序开始前，没有主动去获取过节点，这个时候会使用根节点 document 来进行查找。

 

实例演示

预览

复制

<div id="html-element">

  我是一个元素

</div>

 

<script>

  var element = document.getElementById('html-element');

 

  element.innerHTML = '<a href="//imooc.com">我变成了超链接</a>';

</script>

<div id="html-element">

  我是一个元素

</div>

 

<script>

  var element = document.getElementById('html-element');

 

  element.innerHTML = '<a href="//imooc.com">我变成了超链接</a>';

</script>

点击 "运行案例" 可查看在线运行效果

在使用 JavaScript 操作 DOM 节点的时候，也会把 DOM 节点称为 DOM 对象，以契合编程中对象的概念，更好理解。

 

以上例子通过 document.getElementById 获取 id 为 html-element 的 DOM 节点，并通过修改 innerHTML 属性，将这个节点的内容进行了修改。

 

1.2 element.getElementByName

返回带有指定名称的对象集合。

 

element.getElementByName 是通过元素的 name 属性进行查找的，过去操作表单的时候会经常用到。

 

实例演示

预览

复制

<form>

  <div>

    <label>

      <input type="checkbox" name="skill" checked="checked" value="JavaScript"> JavaScript

    </label>

 

    <label>

      <input type="checkbox" name="skill" value="c++"> C++

    </label>

 

    <label>

      <input type="checkbox" name="skill" checked="checked" value="Java"> Java

    </label>

  </div>

</form>

<div id="result"></div>

 

<script>

  var checkboxes = document.getElementsByName('skill');

 

  var skills = [];

 

  checkboxes.forEach(function(checkbox) {

    if (checkbox.getAttribute('checked')) {

      skills.push(checkbox.value);

    }

  });

 

document.getElementById('result').innerHTML = '选中的技能：' + skills.join('、');

</script>

<form>

  <div>

    <label>

      <input type="checkbox" name="skill" checked="checked" value="JavaScript"> JavaScript

    </label>

 

    <label>

      <input type="checkbox" name="skill" value="c++"> C++

    </label>

 

    <label>

      <input type="checkbox" name="skill" checked="checked" value="Java"> Java

    </label>

  </div>

</form>

<div id="result"></div>

 

<script>

  var checkboxes = document.getElementsByName('skill');

 

  var skills = [];

 

  checkboxes.forEach(function(checkbox) {

    if (checkbox.getAttribute('checked')) {

      skills.push(checkbox.value);

    }

  });

 

document.getElementById('result').innerHTML = '选中的技能：' + skills.join('、');

</script>

点击 "运行案例" 可查看在线运行效果

通过 getElementsByName 获取到的是 DOM 节点的集合，需要注意的是，这个集合不是数组类型的，而是 NodeList ，其不具备数组的 map 、filter 等方法，但是具备 forEach 方法。

 

Tips：IE 和早期浏览器的 NodeList 是没有 forEach 方法的，具体版本可以通过 查看。

 

1.3 element.getElementsByTagName

返回带有指定标签名的对象集合。

 

element.getElementsByTagName 是通过标签名获取 DOM 节点的，返回的也是一个集合。

 

实例演示

预览

复制

<div>

  <p>我是第一个段落。</p>

  <p>我是第二个段落。</p>

  <p>我是第三个段落。</p>

  <p>我是第四个段落。</p>

  <p>我是第五个段落。</p>

</div>

<div id="result" style="color: #4caf50;"></div>

<script>

  var pList = document.getElementsByTagName('p');

 

  var res = [];

  var i, len;

  for (i = 0, len = pList.length; i < len; i++) {

 res.push(pList[i].innerText);

  }

  

  document.getElementById('result').innerHTML = '所有 p 标签的内容：<br>' + res.join('<br>');

</script>

<div>

  <p>我是第一个段落。</p>

  <p>我是第二个段落。</p>

  <p>我是第三个段落。</p>

  <p>我是第四个段落。</p>

  <p>我是第五个段落。</p>

</div>

<div id="result" style="color: #4caf50;"></div>

<script>

  var pList = document.getElementsByTagName('p');

 

  var res = [];

  var i, len;

  for (i = 0, len = pList.length; i < len; i++) {

 res.push(pList[i].innerText);

  }

  

  document.getElementById('result').innerHTML = '所有 p 标签的内容：<br>' + res.join('<br>');

</script>

点击 "运行案例" 可查看在线运行效果

此方法返回值的类型是 HTMLCollection ，不是 NodeList ，没有 forEach 方法。

 

可以使用 for 循环对返回值进行遍历。

 

Tips： 特别要注意，此方法为 getElementsByTagName，前往不要忘记有个 s。

 

1.4 element.getElementsByClassName

返回一个包含了所有指定类名的子元素的类数组对象。

 

element.getElementsByClassName 通过元素的类名来获取 DOM 节点。

 

实例演示

预览

复制

<div>

  <div class="odd">1</div>

  <div class="even">2</div>

  <div class="odd">3</div>

  <div class=&