目录
1.操作元素-修改DOM（文档对象模型）元素
1. 修改元素的文本内容
2. 修改元素的样式
3. 修改元素的属性
4. 修改元素的类名
5.修改body元素
2.修改自定义属性
2.1H5中设置自定义属性、
2.2使用JavaScript修改自定义属性
3.节点操作
3.1节点概述
3.2 创建节点
3.3 插入节点
3.4 删除节点
3.5替换节点
3.6 复制节点
3.7兄弟节点
1. nextSibling 和 previousSibling
2. nextElementSibling 和 previousElementSibling（IE9兼容）
1.操作元素-修改DOM（文档对象模型）元素
1. 修改元素的文本内容
textContent属性来修改元素的文本内容。这个属性会替换元素的所有子节点，只保留一个文本节点
// 假设我们有一个元素 <p id="demo">Hello</p>
document.getElementById("demo").textContent = "Hello, World!";
var btn = document.querySelector('button').innerText="好好学习，专注自己";插入HTML内容（而不是纯文本），可以使用innerHTML属性，但请注意这可能会使你的网页容易受到跨站脚本（XSS）攻击
// 插入HTML
document.getElementById("demo").innerHTML = "<strong>Hello, World!</strong>";2. 修改元素的样式
修改元素的style属性来更改其样式。style属性是一个对象，你可以设置CSS样式属性作为对象的属性。
// 改变元素的颜色和字体大小
document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "20px";
// 或者使用驼峰命名法
document.getElementById("demo").style.backgroundColor = "yellow";3. 修改元素的属性
使用setAttribute()方法来为元素添加或修改属性，使用removeAttribute()方法来移除属性。
// 添加或修改属性
document.getElementById("demo").setAttribute("href", "https://example.com");
// 移除属性
document.getElementById("demo").removeAttribute("href");4. 修改元素的类名
使用className属性来修改元素的类名。如果元素有多个类名，它们应该通过空格分隔。
// 假设我们有一个元素 <div id="myDiv" class="oldClass"></div>
document.getElementById("myDiv").className = "newClass";
// 如果想要添加或移除类，而不是替换所有类，可以使用classList
document.getElementById("myDiv").classList.add("anotherClass");
document.getElementById("myDiv").classList.remove("oldClass");
// 切换类
document.getElementById("myDiv").classList.toggle("activeClass");5.修改body元素
document.body.style.backgroundImage = "url(" + this.src + ")";2.修改自定义属性
2.1H5中设置自定义属性、
<div id="userInfo" data-user-id="12345" data-role="admin">用户信息</div>2.2使用JavaScript修改自定义属性
使用JavaScript的setAttribute()方法来修改自定义属性
使用JavaScript的removeAttribute()方法来移除自定义属性
// 获取元素
var userInfo = document.getElementById('userInfo');
// 修改自定义属性
userInfo.setAttribute('data-user-id', '67890');
userInfo.setAttribute('data-role', 'superadmin');
// 或者，如果你只是想更新已存在的自定义属性的值，上面的方法是可行的。
// 但如果你想要添加一个新的自定义属性，只需按照上面的方式做即可。
// 如果你想移除一个自定义属性，可以使用 removeAttribute() 方法
userInfo.removeAttribute('data-role');可以使用getAttribute()方法来读取自定义属性的值
// 读取自定义属性的值
var userId = userInfo.getAttribute('data-user-id');
console.log(userId); // 输出: 67890
// 另一种更现代且方便的方法是使用 dataset 属性，它提供了一个更直接的方式来访问所有以 data-* 开头的属性
var userId = userInfo.dataset.userId; // 注意：这里不需要 'data-' 前缀
var role = userInfo.dataset.role; // 如果之前没有被 removeAttribute() 移除的话
console.log(userId); // 输出: 67890
console.log(role); // 输出: superadmin（如果之前没有被移除）3.节点操作
3.1节点概述
网页中所有内容都是节点（标签、文本、注释、属性等），在DOM中节点使用node表示。
HTML DOM树所有节点都可以通过JS访问，所有HTML元素/节点均可以被修改，也可以被创建或删除。
3.2 创建节点
创建元素节点：使用document.createElement(tagName)方法，其中tagName是要创建的元素的标签名。
创建文本节点：使用document.createTextNode(text)方法，其中text是要创建的文本节点的文本内容。
3.3 插入节点
作为子节点插入：使用parentNode.appendChild(childNode)方法，将childNode作为parentNode的最后一个子节点插入。
在指定子节点前插入：使用parentNode.insertBefore(newNode, referenceNode)方法，将newNode插入到parentNode的子节点列表中referenceNode之前。
3.4 删除节点
使用parentNode.removeChild(childNode)方法，从parentNode中移除childNode。
3.5替换节点
使用parentNode.replaceChild(newChild, oldChild)方法，用newChild替换parentNode中的oldChild。
3.6 复制节点
使用node.cloneNode(deep)方法，其中node是要复制的节点，deep是一个布尔值，指示是否进行深复制（即复制节点及其所有子节点）。
代码演示：
// 创建一个新的<p>元素
var newParagraph = document.createElement("p");
// 创建一个文本节点，并将其添加到<p>元素中
var textNode = document.createTextNode("这是一个新的段落。");
newParagraph.appendChild(textNode);
// 将<p>元素添加到<body>的末尾
document.body.appendChild(newParagraph);获取元素节点代码演示：
- children和childNodes的区别：前者只获取元素节点，后者元素、文本节点都获取
- firstchild是第一个节点，不管是文本节点还是元素节点
- firstElementchild是获取第一个子元素节点（有兼容性问题IE9以上支持）
解决兼容性写法，实际开发常用
//解决兼容性问题写法
console.log(ol.children[0]); //获取ol的第一个子元素节点
console.log(ol.children[ol.children.length-1]); //获取ol的最后一个子元素节点代码示例：
var ul=document.querySelector('ul');
var ol=document.querySelector('ol');
//获取ol的第一个li节点
console.log(ol.firstElementChild);
//获取ol的最后一个li节点
console.log(ol.lastElementChild); //1.子节点包含元素节点和文本节点
console.log(ul.childNodes.length);//获取ul的子元素的长度
for(var i=0;i<ul.childNodes.length;i++){
console.log(ul.childNodes[i]); // 获取ul的子元素
}
console.log(ul.childNodes); // 获取ul的子元素
console.log(ul.firstChild); //获取ul的第一个子元素
console.log(ul.lastChild); // 获取ul的最后一个子元素
//2.children获取所有子元素节点，不包含文本 实际开发中使用children获取子元素节点更方便
console.log(ul.children.length); // 获取ul的子元素的个数
for(var i=0;i<ul.children.length;i++){
console.log(ul.children[i]); // 获取ul的子元素
}3.7兄弟节点
1. nextSibling 和 previousSibling
nextSibling属性返回紧跟在指定节点之后的节点（在同一父节点下），无论节点类型如何（包括元素节点、文本节点等）。previousSibling属性返回指定节点之前的节点（在同一父节点下），同样不考虑节点类型。
返回所有类型的节点，包括空白文本节点和注释节点，用检查节点的 nodeType 属性以确保它是元素节点。
2. nextElementSibling 和 previousElementSibling（IE9兼容）
nextElementSibling属性返回紧跟在指定元素节点之后的元素节点（在同一父节点下），忽略非元素节点。previousElementSibling属性返回指定元素节点之前的元素节点（在同一父节点下），同样忽略非元素节点
它们直接返回元素节点
<span>我是2节点</span>
<div>好好学习，天天向上</div>
<a href="http://www.baidu.com">baidu </a>
<script>
var div = document.querySelector('div');
var span = document.querySelector('span');
var a = document.querySelector('a');
// 获取兄弟节点
var siblings = div.parentNode.children;
console.log(siblings);
// 获取前一个兄弟节点
var prev = div.previousElementSibling;
console.log(prev);
// 获取后一个兄弟节点
var next = div.nextElementSibling;
console.log(next);
//封装一个兼容性的函数
function getElementSibling(element) {
var el=element;
while (el = el.nextElementSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
</script>
