JavaScript——DOM
笔记目录
一、获取 DOM 元素
1.简介
文档对象模型,是可扩展语言标准的编程接口,通过DOM接口可以改变网页的内容,结构和样式。
2.DOM树
3.获取 DOM 元素
1.根据ID获取
<div id="list"></div>
let list = document.getElementByld("#list");
2.根据标签名获取
<div></div>
let list = document.getElementByTagName("div");
4.通过H5新增的方法获取
5.特殊元素获取
二、DOM 关系
1.常用节点类型
- - 1 元素节点 (标签名称)
- - 3 文本节点 (#text)
- - 8 注释节点 (#comment)
- - 9 document (#document)
- - 10 文档声明 (html)
2.查找节点
1.查找子级
- childNodes 子节点 (包含所有节点: 文本节点、注释节点、元素节点……) | - children 子元素 (只包含元素节点)
<div id="div">
<p>p1</p>
<h3>h1</h3>
<p>p2</p>
<!-- 注释 -->
<p>p3</p>
</div>
{
let div = document.querySelector("#div");
console.log(div.childNodes);//[text, p, text, h3, text, p, text, comment, text, p, text]
console.log(div.children);//[p, h3, p, p]
}
- firstChild 第0个子节点 | - firstElementChild 第0个子元素
- lastChild 最后一个子节点 | - lastElementChild 最后一个子元素
<div id="div">
<p>p1</p>
<h3>h1</h3>
<p>p2</p>
<!-- 注释 -->
<p>p3</p>
</div>
/*
查找子级
childNodes 子节点 (包含所有节点: 文本节点、注释节点、元素节点……)
children 子元素 (只包含元素节点)
firstChild 第0个子节点
firstElementChild 第0个子元素
lastChild 最后一个子节点
lastElementChild 最后一个子元素
*/
let div = document.querySelector("#div");
console