DOm XMind 2021-04-27- 2025-06-09 XMind > JS-JavaScript ]> DOM DOM节点的类型 元素节点：<div></div> 属性节点：id = 'div1' 文本节点：div文本 获取元素节点的方式 node.getElementsByTagName(); node.getElementsByClassName(); IE8以下不兼容 document.getElementById(); document.getElementsByName(); document.querySelector() 返回值：一定是一个元素节点，只返回符合条件的第一 个。 document.querySelectorAll() 返回值：一定是数组，这个数组装有符合条件的元素。 功能：通过传入的参数，获取对应的元素节点。 参数：字符串 模拟css选择器获取元素的方式。 IE8以下不兼容 可以指定从node开始查找 元素节点的属性 oDiv.id oDiv.title oDiv.className 访问class 必须写成className oDiv.style.width oDiv.style.backgroundColor 遇到中间带-的css样式，-去掉，从第二个单词开始首字 母大写。 innerHTML 标签间内容 innerText 标签间纯文本(不带标签) outerHTML 整个标签 tagName 返回当前元素节点的标签名(大写) 只能获取内联的css样式。 //获取当前有效样式浏览器兼容的写法 function getStyle(node, cssStr){ return node.currentStyle ? node.currentStyle[ cssStr] : getComputedStyle(node)[cssStr]; } setAttribute系列方法 setAttribute getAttribute removeAttribute 区别： 1、访问class属性不一样 2、支持自定义属性 【注】操作元素节点行间的属性。 元素节点子节点 childNodes 获取某一个元素节点所有的子节点。 伪数 组 firstChild 快速获取到第一个子节点 lastChild 快速获取到最后一个子节点 nextSibling 找到兄弟节点中的下一个节点 previousSibling 找到兄弟节点中的上一个节点 【注】只获取子节点中的元素节点。 children firstElementChild lastElementChild nextElementtSibling previousElementSibling IE8以下不兼容 parentNode 可以快速获取到当前节点的父节点 文本节点和元素节点都获取 节点操作的方法 document.write("hello world"); 输入内容的时候，将页面上原有的内容全部覆盖掉。 document.createElement(标签的类型) appendChild() 格式：node1.appendChild(node2); 功能：将node2插入到node1的子节点末尾 createTextNode() 格式：document.createTextNode() 参数：文本内容 功能：创建文本节点 insertBefore() 格式：box1.parentNode.insertBefore(box2, box1); 功能：将box2插入到box1的前面 replaceChild() 格式：box1.parentNode.replaceChild(box2, box1); 功能：用box2节点，将box1节点替换。 removeChild()/remove() 格式：box1.parentNode.removeChild(box1); 功能：将box1删除 cloneNode() 格式：node.cloneNode()/node.cloneNode(true) 功能：克隆节点,默认克隆节点本身 返回值：新克隆出来的节点。 本文作者：Mayyuji本文链接：https://mayyuji.github.io/2021/04/27/DOMxmind/版权声明：本博客所有文章除特别声明外，均默认采用 许可协议。