✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
1.js的DOM介绍
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。
1、什么是dom？
dom，全称Document Object Model文档对象模型，是 W3C 的标准； [所有浏览器公共遵守的标准] 。
用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。
2、dom组成：
由HTML、CSS、事件（交互）组成。HTML、CSS完成查、增、删、改（先删后增）的操作。
3、dom缓存：
把查询到的东西存放到一个变量中，该变量占用的是浏览器的内存。
浏览器中所有被访问过的页面都会被存放到BOM的history中。
一句话总结：
dom操作有用原生js的dom操作，也可以用对js封装过的jquery等插件来更加方便的进行dom操作
1、dom是什么？
对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。
对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。
2、Html的DOM树是什么？
HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，这些dom节点构成了一个树形结构
3、原生的dom操作指的是什么？
就是用原生的js进行的操作，相对的就是非原生操作，比如用jquery操作dom
DOM树
文档 对应js中的document对象
查找html元素
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM document object model 文档顶级节点</title> </head> <body> <div id="box"> <p class="p1" >张三</p> <p class="p2">李四</p> <p class="p3">赵刘</p> <p name="ceshi1"></p> <p name="ceshi1"></p> </div> <div> <input type="text" name="username" /> <input type="password" name="pwd" /> <p1>112233</p1> <box>55666</box> </div> <script> console.log(document)
查看当前html界面有哪些元素，就是当前文档的节点，document获取到整个文档
// ### 1 通过id获取div节点对象
var box = document.getElementById(“box”);
console.log(box);
// ### 2 通过类名获取节点对象 [返回的是数组]
var p2 = document.getElementsByClassName(“p2”);
console.log(p2 , typeof(p2));
打印类名为p2的节点对象
// 获取李四节点对象 lisi = p2[0]; console.log(lisi)
// 获取王五节点对象 wangwu = p2[1]; console.log(wangwu);
// ### 3.通过标签获取节点对象 [返回的是数组]
var p = document.getElementsByTagName(“p”);
console.log§
console.log(p[1])
// ### 4.通过标签身上的name属性 [返回的是数组] 一般用在input表单中
var ceshi1 = document.getElementsByName(“username”)[0];
console.log(ceshi1);
通过name获取的是数组
通过数组下标取值，才能获取元素
// ### 通过css选择器获取对应的元素节点
// ### 5.querySelector ,只获取找到的第一个;
里面可以跟css的各种选择器，可以是id，类，标签等等
以css选择器的形式查找相关元素 ，通过p1类来查找，只能查找第一个
var p1 = document.querySelector(“.p1”);
console.log(p1) 
通过id为box来查找 var box = document.querySelector("#box"); console.log(box)
// 通过标签来查找，input表单有两个,但是只获取第一个;
var input = document.querySelector(“input”);
console.log(input);
// ### 6.querySelectorAll 获取所有找到的元素节点,返回数组
通过 CSS 选择器查找 HTML 元素
如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。
var all = document.querySelectorAll(“input[name=username]”)[0];
console.log(all);
获取所有input输入框，返回数组 
获取其中一个
具体查找到一个
综上，使用querySelectorAll() 比较好，能查找的范围广，通过css选择器都可以查找，这样方便我们控制节点
</script> </body> </html>
2.节点元素层级关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节点元素层级关系</title> </head> <body> <div id="box"> <p> <input type="text" name="username" /> <input type="password" name="pwd" /> </p> <p class="p1" >张三</p> <p class="p2">李四</p> <p class="p3">赵刘</p> <p name="ceshi1"></p> <p name="ceshi1"></p> </div> <script> // ### 获取对应的节点元素 console.log(document) console.log(document.documentElement); // html console.log(document.documentElement.children) children获取html下面的子元素，head和body
// 找html里面所有的子节点children var html_children = document.documentElement.children console.log(html_children) // head , body
根据下标取body body = html_children[1]; console.log(body); // head , body
根据body，取其子元素 var div = body.children[0] console.log(div);
div的第一个子元素是p标签，里面两个input子标签 var p0 = div.children[0] console.log(p0)
var input = p0.children console.log(input)
var input1 = input[0] console.log(input1)
// 获取下一个节点对象nextSibling ，兄弟节点，第一个nextSibling 是两个input之间的换行，第二个nextSibling是第二个input
nextSibling 下一个不区分元素还是文本，下一个是什么就查到什么
第二个nextSibling是第二个input
console.log(input1.nextSibling.nextSibling);
// 获取下一个元素节点对象 nextElementSibling。这个查找的不包含空格文本等，查找的是元素节点
var input2 = input1.nextElementSibling;
console.log(input2);
// 获取上一个节点对象 previousSibling。查找上一个节点对象，不管是元素节点还是文本，空格等 console.log(input2.previousSibling)
// 获取上一个元素节点对象 previousElementSibling。只查找元素节点
console.log(input2.previousElementSibling)
// 获取input2父节点元素对象; console.log(input2.parentElement)
父元素是p标签
</script> </body> </html>
3.通过js修改，清空节点内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM 修改/清空内容</title> </head> <body> <button onclick="func1()">修改内容</button> <button onclick="func2()">清空内容</button> <div id="box" style="border:solid 1px red;"> <p>我是最帅的最有钱的<a href="#">最有味的</a>男人</p> </div> <script> // innerHTML 获取标签里面所有内容 [标签 + 文本] // innerText 获取标签里面所有字符串[文本] var p = document.querySelector("#box p"); // console.log把数据展现在控制台 console.log(p);
// document.write 把数据以字符串的形式展现在浏览器
document.write§;
这是把p对象写入到html,写入的是字符串
// 点击button1触发如下任务 , 修改 function func1(){ var content = p.innerHTML; var content = p.innerText; console.log(content); // p.innerHTML = `我被修改了 <a href=''>点我中大奖</a>...1`; p.innerText = `我被修改了 <a href=''>点我中大奖</a>...2`; } // 点击button2触发如下任务 , 清空 function func2(){ p.innerHTML = ''; }
innerHTML获取标签里的所有内容，包含标签和文本，如下，p标签里面包含a标签，点击修改内容，写入到浏览器和控制台的内容包含文本和标签
innerText获取标签里面的所有文本字符串，不包含标签，如下，点击修改内容，打印到浏览器和控制台的只有字符串
修改内容用innerHTML，里面写标签，可以被识别
如果用innerText，里面写标签，会被当做文本写入浏览器
清空内容，将标签里面的内容设为空即可，点击清空按钮即可清空
</script> </body> </html>
前端javascript的DOM对象操作技巧，全场景解析（二）：https://developer.aliyun.com/article/1497188
