JavaScript操作DOM：获取与修改-优快云博客

本文链接：https://blog.youkuaiyun.com/A081127/article/details/123243401

本文主要介绍了JavaScript操作DOM的技巧，包括获取DOM节点的各种方法，如getElementById、querySelector等，强调了需要将NodeList转换为数组进行操作。此外，还讲解了如何修改DOM的style样式和class类名，以及绑定DOM事件、获取CSS样式和处理cookie的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 和 DOM 本身是可以没有关系的，但是开发者需要操作 DOM ，浏览器实现了对应的方法，暴露给开发者，开发者使用 JavaScript 来调用以达到操作 DOM 的目的。

一·获取 DOM

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

element.getElementById

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

element.getElementByName

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

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

element.getElementsByTagName

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

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

element.getElementsByClassName

与 getElementsByTagName 返回值类型相同，此方法返回类型也是 HTMLCollection。同时此方法也不支持 IE8。

element.querySelector

是获取 DOM 节点最常用的方法之一，可以传入 CSS 选择器来匹配获取 DOM 节点。

element.querySelectorAll

返回的也是一个 NodeList。返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。

注意要将集合转为数组

通过某些节点获取的集合是类数组，不带有Array数组的方法

不是让 DOM 节点的集合去调用 slice 方法，而是利用 slice 方法来将 DOM 节点的集合转化为数组。

使用var state= [].slice.call(类数组) 或 Array.prototype.slice.call(类数组) 即可将一个类数组转化为数组。
将数组的原型方法挂载到目标对象的原型上 NodeList.prototype.join = Array.prototype.join 提供join 方法 lisColl.__proto__.map = Array.prototype.map; 提供map方法
使用 for 循环遍历集合，将每一项放入新数组。var i, len; for (i = 0, len = lisColl.length; i < len; i++) { lis.push(lisColl[i]); }
Array.from 可以将一个类数组转化为数组。var str = Array.from(arrayLike).join('');
使用扩展运算符var arr = [...lisColl];

获取 DOM 节点的方法有很多，部分方法返回的是 NodeList 或 HTMLCollection 类型，而不是数组，不能像操作数组一样操作这些集合，转换成数组可以更方便的利用数组的原生方法对其进行操作。

操作节点的时候，特别是动态渲染的节点，需要做空判断，防止程序报错中断执行。

二·修改style样式和class类名来操作DOM

1.通过节点·innerHTML来增加标签的内容

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

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

2.通过style来更改样式，更改后为内联样式

tip.style.color = 'red';

节点.style.修改的属性=修改的属性值

3.通过class来修改样式

tip.className = 'tip show';

节点.classNane=要增加的类名

<label>

爱我别走

</label>

//获取节点

var checkbox = document.querySelector('.checkbox');

//点击事件

toggleBtn.onclick = function() {}

//获取复选框下的checked属性

getAttribute 方法就可以获得某个属性的值。

var checked = checkbox.getAttribute('checked');

//如果是选中状态就移除checked为不选中

removeAttribute 则是将属性从元素上移除。

if (checked) {

checkbox.removeAttribute('checked', '');

} else {

//将checked属性设置为checked选中状态

setAttribute 用于给属性设置属性值。

checkbox.setAttribute('checked', 'checked');

}

};

这三个方法可以用于元素的任意属性，包括 class 。

3.绑定 DOM 事件可以通过以下三种方式：

将事件内联在 HTML 中<script> function load() { alert('页面加载完毕啦！'); }</script><body οnlοad="load()"><div>我是一段滥竽充数文案。</div></body>
使用事件处理器属性绑定事件 toggleBtn.onclick = function() {}
使用 addEventListener 与 removeEventListener 处理事件btn.addEventListener('click', function() { btn.innerText = ++total; });

btn.addEventListener('click', function() {

p.innerText = total;

});

4.获取css样式方法

一、btn.style.backgroundColor;元素.style.属性名

二、非ie window. getComputedStyle(btn).backgroundColor

三、ie bin.currentStyle.backgroundColor

四、获取元素的transform属性的值是matrix(1, 0, 0, 1, 100, 0)

let translates = document.defaultView.getComputedStyle(img,null).transform;
或 getComputedStyle(btn).backgroundColor

解析X轴数值
let translateX = parseFloat(translates.substring(6).split(',')[4]);

解析Y轴数值
let translateY = parseFloat(translates.substring(6).split(',')[5]);

5.自定义事件(不常用)

用于框架和组件

使用 Event 构造函数就可以创建一个自定义事件。详细再查。

6.docnment.cookie

获取cookie

docnment.cookie;

设置cookie

var cookie = 'cookie名称=cookie值'; document.cookie = cookie;

设置cookie属性

document.cookie = '名称=值; 属性1=属性值1'

可以跟随的属性有：

path cookie 生效的路径
domain cookie 生效的域名
max-age 过期时间，单位是秒
expires 过期时间，为一个 UTC 时间
secure 是否只能通过 https 来传递这条 cookie

设置cookie不能有字符来干扰，借助 encodeURIComponent 方法，对 cookie 的值进行编码就可以避免这类问题。