DOM操作简介
概念：DOM 是document object model （文档对象模型 ），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口；把文档中的代码翻译成一个对象模型。
在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象。 这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等。
特点：
1.只有一个根节点document。
2.除了根节点外所有节点都有唯一的一个父节点。
3.document是window对象的属性。
4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象。
5.元素的属性也是独立节点 叫属性节点 但是不是元素节点的子节点。
获取元素的方法
1.通过方法获取节点或元素
//H5之前的方法
document.getElementById //通过id名获取 （查找速度最快）
document.getElementsByClassName //通过类名获取
document.getElementsByName //通过标签的属性name获取
document.getElementsByTagName //通过标签名获取
//H5新增的方法
document.querySelector // 获取符合的第一个元素
document.querySelectorAll //获取符合的所有元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- <title>Document</title> --></head><body><div id="box1"><div class="box2">xiaozhang</div><div class="box2">xiaozhang</div><div class="box2">xiaozhang</div></div><a href="" class="box2">点我</a><input type="radio" name="fruit" value="apple">苹果<input type="radio" name="fruit" value="pear">葡萄<input type="radio" name="fruit" value="banana">香蕉<script>var b1 = document.getElementById("box1")//如果没有这个id,就返回nullconsole.log(b1); var b2 = document.getElementsByClassName("box2")// 如果没有就返回 HTMLCollection[]console.log(b2);var b3 = document.getElementsByTagName("a")// 如果没有也返回 HTMLCollection[]console.log(b3);var b4 = document.getElementsByName("fruit")// 如果没有也是返回 HTMLCollection[]console.log(b4);var b5 = document.querySelector("#box1 .box2")// 如果没有就返回nullconsole.log(b5);var b6 = document.querySelectorAll("#box1 .box2")// 如果没有也是返回nullconsole.log(b6);</script></body></html>
2.通过关系获取节点或元素
1. document.querySelector().parentElement //获取父元素
document.querySelector().parentNode //获取父节点
2. document.querySelector().children //获取子元素们
document.querySelector().childNodes //获取子节点们
3. document.querySelector().nextElementSibling //获取下一个兄弟元素
document.querySelector().nextSibling //获取下一个兄弟节点
4. document.querySelector().previousElementSibling //获取上一个兄弟元素
document.querySelector().previousSibling //获取上一个兄弟节点
5. document.querySelector().firstElementChild //获取第一个子元素
document.querySelector().firstChild //获取第一个子节点
6. document.querySelector().lastElementChild //获取最后一个子元素
document.querySelector().lastChild //获取最后一个子节点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- <title>Document</title> --></head><body><div id="box1"><div class="box2" id="box4">2</div><div class="box2"><div class="box3" id="box5">box3</div></div><div class="box2" id="box2">4</div><div class="box2" id="box6">6</div></div><script>var a = document.querySelector("#box4").parentElementconsole.log(a);var a1 = document.querySelector("#box4").parentNodeconsole.log(a1);var b = document.querySelector("#box1").childrenconsole.log(b);var b1 = document.querySelector("#box1").childNodesconsole.log(b1);var c = document.querySelector("#box2").nextElementSiblingconsole.log(c);var c1 = document.querySelector("#box2").nextSiblingconsole.log(c1);var d = document.querySelector("#box2").previousElementSiblingconsole.log(d);var d1 = document.querySelector("#box2").previousSiblingconsole.log(d1);var e = document.querySelector("#box1").firstElementChildconsole.log(e);var e1 = document.querySelector("#box1").firstChildconsole.log(e1);var f = document.querySelector("#box1").lastElementChildconsole.log(f);var f1 = document.querySelector("#box1").lastChildconsole.log(f1);</script></body></html>
切换元素的属性值
<body><div id="box">xiaozhang</div><input type="text" id="inp"><div contenteditable="true" id="box2">666</div><a href="" id="a1">点我</a><br><button id="btn">切换</button><script>var btn1 = document.querySelector("#btn")// 给button按钮绑定一个点击事件，点击之后执行函数btn1.onclick = function () {var b1 = document.querySelector("#box")b1.innerHTML = "hello" //将id为box的标签内容改为hellovar inp1 = document.querySelector("#inp")inp1.value = "123" //将id为inp的标签value值改为123var b2 = document.querySelector("#box2")b2.innerText = "888" //将id为box2的标签内容改为888var a1 = document.querySelector("a")a1.style.textDecoration = "none" //将a标签的下划线去掉}</script></body>
切换前：
切换后：
