一、DOM简介
DOM：文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言的（HTML或XML）标准接口。
- W3C定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
1-1、文档、元素、节点
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有的标签都是元素，DOM中使用element表示
- 节点：页面中的所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
1-2、DOM常见节点类型（nodeType）
- 1：元素节点
- 3：文本节点
- 8：文档注释
- 9：Document
- 10：文档声明
1-3、各节点类型的节点名称（nodeName）
- 元素节点：对应的节点名称就是标签名称，如LI
- 文本节点： #text
- 注释节点：#comment
- Document：#document
- 文档声明：html
二、获取元素
获取页面中的元素可以有以下几种方式：
- 根据ID
- 根据标签名
- 根据HTML5新增的方法
- 特殊元素的获取
2-1、根据ID获取
- 注意，这里的id为id名，不要加'#'
document.getElementById('id');
2-2、根据标签名获取
document.getElementsByTagName('标签名');
2-3、根据HTML5新增的方法获取
document.getElementsByClassName('类名'); // 根据类名返回符合的元素对象集合
document.querySelector('选择器');// 根据选择器返回指定的一个元素对象
document.querySelectorAll('选择器');// 根据指定选择器返回所有符合的元素对象
- querySelector与querySelectorAll中传递的选择器要加上符号，如document.querySelectorAll('.child')
2-4、特殊元素的获取
document.body // 返回body元素对象
document.documentElement // 返回html元素对象
三、由DOM关系获取元素
3-1、获取子级元素
获取子级方式包括：
- childNodes
- children
- firstChild
- firstElementChild
- lastChild
- lastElementChild
获取子级元素的这些方式只能获取直接子级
3-1-1、childNodes
获取父元素下所有子节点，包含文本节点、注释节点以及元素节点
- 注意，换行会被看作文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div">
<p>1</p>
<h3>h1</h3>
<p>2</p>
<!--我是注释-->
<p>3</p>
<h4>h2</h4>
<p>4</p>
<h3>h3</h3>
<p>5</p>
<p>6</p>
</div>
<script>
let div = document.querySelector('#div');
let children = div.childNodes;
console.log(children); // NodeList(21) [text, p, text, h3, text, p, text, comment, text, p, text, h4, text, p, text, h3, text, p, text, p, text]
</script>
</body>
</html>
3-1-2、children
查找父级下的子元素，只包含元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div">
<p>1</p>
<h3>h1</h3>
<p>2</p>
<!--我是注释-->
<p>3</p>
<h4>h2</h4>
<p>4</p>
<h3>h3</h3>
<p>5</p>
<p>6</p>
</div>
<script>
let div = document.querySelector('#div');
let children = div.children;
console.log(children); // HTMLCollection(9) [p, h3, p, p, h4, p, h3, p, p]
</script>
</body>
</html>
3-1-3、firstChild
获取第0个子节点（包含文本节点、注释节点、元素节点等）
console.log(div.firstChild); // #text
3-1-4、firstElementChild
获取第0个子元素
console.log(div.firstElementChild); // <p>1</p>
3-1-5、lastChild
获取最后一个子节点（包含文本节点、注释节点、元素节点等）
console.log(div.lastChild); // #text
3-1-6、lastElementChild
获取最后一个子元素
console.log(div.lastElementChild);// <p>6</p>
3-2、获取兄弟级元素
获取兄弟级元素包含以下几种方式：
- nextSibling
- nextElementSibling
- previousSibling
- previousElementSibling
3-2-1、nextSibling
获取下一个兄弟节点（包含文本节点、注释节点、元素节点等）
3-2-2、nextElementSibling
获取下一个兄弟元素
3-2-3、previousSibling
获取上一个兄弟节点（包含文本节点、注释节点、元素节点等）
3-2-4、previousElementSibling
获取上一个兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div">
<p>1</p>
<h3>h1</h3>
<p>2</p>
<!--我是注释-->
<p>3</p>
<h4>h2</h4>
<p>4</p>
<h3>h3</h3>
<p>5</p>
<p>6</p>
</div>
<script>
let div = document.querySelector('#div');
let p2 = div.children[2];
console.log(p2.nextSibling);// #text
console.log(p2.nextElementSibling); // <p>3</p>
console.log(p2.previousSibling);// #text
console.log(p2.previousElementSibling);// <h3>h1</h3>
</script>
</body>
</html>
3-3、获取父级元素
获取父级元素有以下几种方式：
- parentNode
- parentElement
- offsetParent
3-3-1、parentNode
获取元素的父节点
3-3-2、parentElement
获取元素的父元素
parentNode 与 parentElement 使用起来无差别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<div id="box2">
<span></span>
</div>
</div>
<script>
let span = document.querySelector('span');
console.log(span.parentNode);// <div id="box2"><span></span></div>
console.log(span.parentElement);// <div id="box2"><span></span></div>
</script>
</body>
</html>
3-3-3、offsetParent
获取子元素的定位父级元素
- 如果元素存在定位，则定位父级是离自己最近的定位父级
- 如果元素本身不存在定位，则获取到的定位父级就是它的父级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
position: relative;
}
span {
position: absolute;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id="box">
<div id="box2">
<span></span>
</div>
</div>
<script>
let div2 = document.querySelector('#box2');
let span = document.querySelector('span');
console.log(span.offsetParent);// span存在定位，获取到的是id为box的div元素
console.log(div2.offsetParent); // div2 本身不存在定位所以定位父级就是它的父级
</script>
</body>
</html>
