获取和操作 DOM 节点
发布时间：2023-03-09 08:56:44 所属栏目：教程 来源：
导读：DOM 节点也会被称为 DOM 元素。
想要操作 DOM 节点，就必须先获取到 DOM 节点。
1. 获取 DOM 节点
获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：
element.getElementB
想要操作 DOM 节点，就必须先获取到 DOM 节点。
1. 获取 DOM 节点
获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：
element.getElementB
|
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> 在使用 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> 通过 getElementsByName 获取到的是 DOM 节点的集合，需要注意的是，这个集合不是数组类型的，而是 NodeList ，其不具备数组的 map 、filter 等方法，但是具备 forEach 方法。 Tips：IE 和早期浏览器的 NodeList 是没有 forEach 方法的，具体版本可以通过 Can I Use 查看。 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 = , 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="even">4</div> <div class="odd">5</div> <div class="even">6</div> </div> <div id="result"></div> <script> var odd = document.getElementsByClassName('odd'); var res = []; var i, len; for (i = , len = odd.length; i < len; i++) { res.push(odd[i].innerText); } var resultElement = document.getElementById('result'); resultElement.innerHTML = '所有奇数：<br>' + res.join('<br>'); </script> 与 getElementsByTagName 返回值类型相同，此方法返回类型也是 HTMLCollection。 Tips：注意，getElementsByTagName 中也有 s 。同时此方法也不支持 IE8。 1.5 element.querySelector 文档对象模型 Document 引用的 querySelector () 方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element 。 如果找不到匹配项，则返回 null 。 element.querySelector 是获取 DOM 节点最常用的方法之一，可以传入 CSS 选择器来匹配获取 DOM 节点。 如使用 CSS 在给 id 为 tip 的元素设置红色字体样式的时候，选择器使用的是 #tip。 #tip { color: red; } 使用 element.querySelector 获取 id 为 tip 的元素，传入的参数也是 #tip，与 CSS 选择器一致。 <div> <div id="tip">今日大甩卖！！一双袜子 <strong>三</strong> 块！三双袜子只要 <strong>十</strong> 块！！</div> </div> <script> var tip = document.querySelector('#tip'); tip.style.color = 'red'; </script> 通过设置 style 下的 color 属性，可以更改字体颜色。通过 style 设置的样式都是内联样式。 即便传入的选择器能匹配到多个 DOM 对象，此方法也只会返回一个 DOM 对象。 1.6 element.querySelectorAll 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。 此方法传入的参数与 querySelector 一致，但会返回匹配到的所有 DOM 对象。 <ul> <li>我是列表1</li> <li>我是列表2</li> <li>我是列表3</li> <li>我是列表4</li> </ul> <button class="change">变！</button> <script> var lis = document.querySelectorAll('li'); var btn = document.querySelector('.change'); btn.addEventListener('click', function() { lis.forEach(function(li, index) { li.innerText = index; }); }); </script> element.querySelectorAll 返回的也是一个 NodeList。 2. 操作 DOM 节点 到目前为止已经做了许多 DOM 操作了，如使用 innerText 修改文本，使用 style 修改样式，这些其实都是在操作 DOM。 这里列举两个常用的操作。 2.1 修改 class 属性 修改节点的 class 属性，这个操作频率是非常高的。 如使用 class 来控制元素的显示与隐藏。 <style> .show { display: block; } .hidden { display: none; } </style> <p class="tip show">我要早睡早起，不能再熬夜了。</p> <button class="toggle">切换</button> <script> var toggleBtn = document.querySelector('.toggle'); var tipEle = document.querySelector('.tip'); toggleBtn.addEventListener('click', function() { var className = tipEle.className; if (className.indexOf('show') > -) { tipEle.className = 'tip hidden'; return; } tipEle.className = 'tip show'; }); </script> 通过 DOM 节点的 className 属性，来控制 class。 2.2 设置 / 获取其他属性 修改 class 也属于这个场景，但使用 className 更为频繁，所以单独拿出来介绍。 节点的许多状态是使用属性表示的，如复选框是否选中，就是由 checked 属性决定。 <label> <input type="checkBox" class="checkBox"> 爱我别走 </label> <div style="margin-top: px;"> <button class="toggle">切换!</button> </div> <script> var checkBox = document.querySelector('.checkBox'); var toggleBtn = document.querySelector('.toggle'); toggleBtn.onclick = function() { var checked = checkBox.getAttribute('checked'); if (checked) { checkBox.removeAttribute('checked', ''); } else { checkBox.setAttribute('checked', 'checked'); } }; </script> getAttribute 方法就可以获得某个属性的值。 setAttribute 用于给属性设置属性值。 removeAttribute 则是将属性从元素上移除。 这三个方法可以用于元素的任意属性，包括 class 。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |