-
DOM:Dcoument Object model 文档对象模型
-
用途：DOM就是为了操作文档用的
-
在DOM眼里，整个文档的内容都是对象
-
DOM文档的一切内容都定义成了对象。
- 文档是对象
- 元素是对象
- 文本是对象
- 属性是对象
- 注释是对象
-
DOM是W3c制定的一套标准
DOM树的认识？
-
DOM树是文档对象模型的树状表示
-
DOM眼里，全部文档内容都是对象。一共有五大常见对象
- 文档 元素 属性 文本 注释
-
其中文档对象是DOM的核心对象
-
DOM定义了大量的属性和方法来操作这些对象
document对象
谈一谈对document对象的认识
- document对象表示网页文档，document对象是进入文档的入口，也是DOM对象
- document对象主要用途用于查询元素，还可以创建元素，添加元素，删除元素
- 使用document对象查询元素的方法有三种
- 传统方法
- H5新增方法
- 特殊方法
定义
- document表示网页文档
- document对象是DOM的核心对象
- document对象是访问文档的入口
用途
document对象的主要用途增删改查
- 查：查找元素
- 增：创建元素
- 删：删除元素
- 改：替换元素
Node API
谈一谈你对象Node API的认识
- Node API把DOM树的全部对象看成了节点，并为这些节点对象定义了大量的属性和方法
- doucment API查找元素的方法是直接查找
- Node API查找的方法是：间接查找，也就是元素之间的查找
- Node.nodeType:返回节点类型，使用数字表示
- Node.nodeNeme:返回节点名字
- Node.nodevalue
- 返回文本节点和注释的值
- 文档节点，元素节点返回null 添加子元素的方法
- Node.appenChild('元素')
- Node.insertBefore(元素，元素位置)
删除子元素的方法
- Node.removeChild(子节点)
替换子节点的方法
- Node.repalaceChild(子节点)：在父节点上执行替换子节点
查找子节点的方法
- Node.hasChildNodes():在父节点上执行查询节点的数字 定义 Node API把文档中的一切对象看出是节点
用途
- 查找节点的基本信息：名称，类型，值
- 节点之间的关系：父子，兄弟
- 操作节点：增，删，改，查
Node.nodeType
定义了节点的类型。节点类型使用一个数字表示。Node API把节点类型分为9种
| 节点名字 | 数字表示 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| 文档节点 | 9 |
节点定义
父节点：一个节点之上的直接节点
子节点：一个节点之下的直接节点
兄弟节点：具有相同父节点的节点
后代节点：一个节点之下所有层级的节点
查找节点关系
- Node.childNodes:属性可返回指定节点的子节点的节点列表
- Node.parentNode:返回当前节点的父节点对象
- Node.childNodes：返回当前节点的子节点列表
- Node.nextSibling：返回当前节点的下一个兄弟节点
- Node.previousSibling：返回当前节点的上一个兄弟节点
- Node.firstChild：返回当前节点的第一个节点
- Node.lastChild：返回当前节点的最后一个节点
document.createTextNode()
定义
创建一个文本节点
语法
document.createTextNode('')
document.createElement
定义
创建⼀个新元素。(在挂在到DOM之前，新元素存储在内存⾥)
语法
document.createElement('标签名')
Node.appendChild()
定义
从⽗节点的末尾添加⼦节点。
语法
⽗节点对象.appendChild(⼦节点对象)
- ⽗节点对象：就是你获取元素
- ⼦节点对象: 1. 已有节点 2.新建节点
返回值
返回新添加的元素
示例
<input type="text"><button>发送</button>
<ul>
<li>第1条语言</li>
<li>第2条语言</li>
</ul>
<script>
const input = document.querySelector('input')
const btn = document.querySelector('button')
const ul =document.querySelector('ul')
let str = ''
//点btn，获取input的value值
btn.addEventListener('click',()=>{
str = input.value
//创建一个新元素
const li = document.createElement('li')
li.innerHTML = str
console.log(str);
//父:appendChild
ul.appendChild(li)
})
</script>
Node.insertBefore()
定义
insertBefore用于把父节点开头添加子节点
语法
⽗节点对象.insertBefore(新⼦节点,旧⼦节点位置)
返回值
返回添加的子节点
<h2>点击按钮 倒序发布留言</h2>
<hr>
<input type="text" /> <button>发表</button>
<ul></ul>
<scrgt>
const input = document.querySelector("input");
const btn = document.querySelector("button");
const ul = document.querySelector("ul");
btn.addEventListener("click", () => {
const txt = input.value;
if (!txt) return;
const li = document.createElement("li");
li.innerText = input.value;
if (ul.children) {
//终极目标
ul.insertBefore(li, ul.firstChild);
} else {
//终极目标
ul.appendChild(li);
}
input.value = ''
});
</scrgt>
element.insertAbjacentElement()
定义
inserAdjacentElement用于向目标元素的指定位置添加新元素
语法
目标元素.inserAdjacentElement('position',新元素)
position
该参数是一个字符串，它有四个值(不区分大小写)，表示插入新元素的方式
beforeBegin在开始之前beforeEnd在结束之前afterBegin开始标签之后afterEnd结束标签之后
返回值
示例
Node.replaceChild()
定义
在父节点上执行替换子节点
语法
父节对象.replaceChild(替换元素，被替换元素)
Node.removeChild()
定义
从⽗节点身上删除⼦节点。
语法
⽗节点对象.removeChild(⼦节点对象)
返回值
删除的⼦节点对象或null
Node.remove()
定义
将元素从DOM中删除
语法
node.remove();
返回值
| Element API | Node API | |
|---|---|---|
| 获取⼦对象列表 | children | Node.childNodes |
| 获取第⼀个⼦对象 | firstElementChild | Node.firstChild |
| 获取最后⼀个⼦对象 | lastElementChild | Node.lastChild |
| 获取下⼀个兄弟对象 | nextElementSibling | Node.nextSibling |
| 获取上⼀个兄弟对象 | previousElementSibling | Node.previousSibling |
| 获取⽗对象 | prentElement | Node.parentNode |
