DOM 概述
DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。
浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。
DOM 只是一个接口规范,可以用各种语言实现。所以严格地说,DOM 不是 JavaScript 语法的一部分,但是 DOM 操作是 JavaScript 最常见的任务,离开了 DOM,JavaScript 就无法控制网页。另一方面,JavaScript 也是最常用于 DOM 操作的语言。
节点
DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document
:整个文档树的顶层节点
DocumentType
:doctype
标签(比如<!DOCTYPE html>
)
Element
:网页的各种HTML标签(比如<body>
、<a>
等)
Attribute
:网页元素的属性(比如class="right"
)
Text
:标签之间或标签包含的文本
Comment
:注释
DocumentFragment
:文档的片段
节点树
一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点,下一层都是顶层节点的子节点,然后子节点又有自己的子节点,就这样层层衍生出一个金字塔结构,倒过来就像一棵树。
浏览器原生提供document
节点,代表整个文档。
文档的第一层有两个节点,第一个是文档类型节点(<!doctype html>
),第二个是 HTML 网页的顶层容器标签<html>
。后者构成了树结构的根节点(root node),其他 HTML 标签节点都是它的下级节点。
除了根节点,其他节点都有三种层级关系。
1.父节点关系(parentNode
):直接的那个上级节点
2.子节点关系(childNodes
):直接的下级节点
3.同级节点关系(sibling
):拥有同一个父节点的节点
DOM 提供操作接口,用来获取这三种关系的节点。比如,子节点接口包括firstChild
(第一个子节点)和lastChild
(最后一个子节点)等属性,同级节点接口包括nextSibling
(紧邻在后的那个同级节点)和previousSibling
(紧邻在前的那个同级节点)属性。
获取节点(查找元素)
标签==元素==节点
直接获取
通过id:document.getElementById('id')
通过类名:document.getElementsByClassName('class')
通过标签名:document.getElementsByTagName('tag')
html5新增
querySelector
找到所有满足的元素,并且返回第0个
querySelectorAll
找到所有满足的元素
let oul=document.getElementById("ul1");
oul.getElementsByClassName("box"); => document.querySelectorAll('#ul1 .box div')
getElementsByTagName("div")
<body>
<div id="div1">
<ul>
<li>
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
<li class="box">
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
<li class="box">
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
<li>
<span>111</span>
<span class="s1">222<input type="text" ></span>
<span>333</span>
</li>
</ul>
</div>
<script>
let arr=document.querySelectorAll('#div1 ul li.box span.s1 input[type=text]');
// 给选中的元素添加背景
for (let i=0;i<arr.length;i++){
arr[i].style.background='pink';
}
console.log(arr);
</script>
</body>
节点操作(元素操作)
创建节点(元素)
创建元素 document.createElement("tag")
添加元素 parent.appendChild(child)
添加(追加)到最后
添加元素 parent.insertBefore(child,位置)
添加到任意位置
<body>
<input type="text" id="txt1">
<button type="button" id="btn1">按钮</button>
<ul id="ul1"></ul>
<script>
let oTxt=document.getElementById("txt1");
let oBtn=document.getElementById("btn1");
let oUl=document.getElementById("ul1");
//点击button按钮后
oBtn.onclick=function (){
//创建一个li元素
let oLi=document.createElement("li");
// oTxt.value 获取输入框里的内容
oLi.innerHTML=oTxt.value;
// 获取完后清空oTxt.value里的内容
oTxt.value='';
//创建一个元素必须插入才会显示
// 把获取到输入框里的内容写入到li标签并且往页面追加显示此元素
oUl.appendChild(oLi);
}
</script>
</body>
删除节点(元素)
删除元素 parent.removeChild(child)
<body>
<h2>删除节点</h2>
<div id="txt">
<p>这是第一个子节点</p>
<p>这是第二个子节点</p>
<p>这是第三个子节点</p>
</div>
<input type="button" value="删除" id="btn">
<script>
let deletetxt=document.getElementById('txt');
let delNode=document.getElementById('btn');
delNode.onclick=function (){
//判断是否有子节点
if(deletetxt.hasChildNodes()){
//删除第一个节点
deletetxt.removeChild(deletetxt.firstChild);
}
}
</script>
</body>
替换元素
替换元素 parent.replaceChild(child,old_child)
<body>
<button type="button" id="btn1">按钮</button>
<ul id="ul1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<script>
let oBtn=document.getElementById('btn1');
let oUl=document.getElementById('ul1');
oBtn.onclick=function (){
//创建一个li元素
let oLi=document.createElement('li');
oLi.innerHTML="xiaomo";
// 替换掉ul下第一个li里的内容
oUl.replaceChild(oLi,oUl.children[0]);
}
</script>
</body>