一、DOM的概念
DOM（Document Object Model）文档对象模型
DOM是W3C(万维网联盟)定义的关于访问HTML和XML文档的标准
W3CDOM标准分为3部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
【说明】HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准，即操作HTML的元素
二、DOM的节点分类
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点树中的节点彼此拥有层级关系。
- 父（parent）节点：父节点拥有任意数量的子节点
- 子（child）节点：子节点拥有一个父节点
- 兄弟（sibling）节点：同级的子节点被称为同胞（兄弟或姐妹）。同胞是拥有相同父节点的节点
- 根（root）节点：在节点树中，顶端节点被称为根（root） 根节点没有父节点
三、DOM中获取节点的方法
1、获取元素节点
-
getElementById()
根据元素id获取元素节点 -
getElementsByTagName()
根据标签名称获取元素节点注意：返回值是集合 -
getElementsByClassName()
获取相同class属性的节点列表（ IE8及以下不支持） -
getElementsByName()
获取相同名称的节点列表
注意： 不是所有标签都有name属性（form 表单元素有） 某些低版本浏览器会有兼容性问题 -
querySelector()
找到符合该选择器的第一个元素 -
querySelectorAll()
找到符合该选择器的所有元素
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="first">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<input type="checkbox" name="sex" />男
<input type="checkbox" name="sex" />女
<p>第一个p
<span>第一个span</span>
</p>
<p>第二个p
<span>第二个span</span>
</p>
<script type="text/javascript">
//1.通过id获取元素
var aDiv1 = document.getElementById("first");
console.log(aDiv1);
//2.通过标签名获取元素
var aDiv2 = document.getElementsByTagName("div");
console.log(aDiv2);
//3.通过class来获取 在IE8以下的浏览器无法获取
var aDiv3 = document.getElementsByClassName("box");
console.log(aDiv3);
//4.通过name来获取元素节点
var aCheckBox = document.getElementsByName("sex");
console.log(aCheckBox);
//5.找到符合该选择器的第一个元素
var arr = document.querySelector('p span');
console.log(arr);
//5.找到符合该选择器的所有元素
arr = document.querySelectorAll('p span');
console.log(arr);
</script>
</body>
</html>
2、获取和修改属性节点的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="div1" id="first">1</div>
<input type="text" value="123" name="btn" />
<a href="index1.html" title="链接">超链接</a>
<script>
var div1 = document.getElementById('first');
//获取属性
console.log(div1.className);//class属性
console.log(div1.id);//id属性
console.log(div1.tagName);//元素节点的标签名
var btn = document.querySelector('input');
console.log(btn.value);//获取value属性
console.log(btn.name);//name属性
var a = document.querySelector('a');
console.log(a.title);//title属性
console.log(a.href);//href属性
//修改/设置标签属性
div1.className = 'div2';
btn.value = '这是个值';
</script>
</body>
</html>
标签自定义属性操作
-
getAttribute() 获取节点自定义的属性的值
-
setAttribute() 设置自定义属性的值
-
removeAttribute() 移除自定义属性 某些低版本浏览器不支持
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="box" myattr="自定义的属性"></div>
<script type="text/javascript">
var box = document.getElementById('box');
//1.获取自定义属性的属性值
console.log(box.getAttribute("myattr")); //自定义的属性
//2.设置自定义属性的属性值
box.setAttribute("myattr", "hello");
console.log(box.getAttribute("myattr")); //hello
//3.删除自定义的属性节点
box.removeAttribute("myattr");
console.log(box.getAttribute("myattr")); //null
</script>
</body>
</html>
3、获取文本节点
-
innerHTML
从对象的开始标签到结束标签的全部内容,不包括Html标签。 -
outerHTML
除了包含innerHTML的全部内容外, 还包含对象标签本身。 -
innerText
从对象的开始标签到结束标签的全部的文本内容
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="box">
<span>我是span</span>
<div>我是div</div>
</div>
<script type="text/javascript">
var box = document.getElementById('box');
//1.开始标签到结束标签之间的内容
console.log(box.innerHTML);
//2.innerHTML的内容在加上开始标签与结束标签
console.log(box.outerHTML);
//3.开始标签与结束标签之间的文本信息
console.log(box.innerText);
//4.设置标签文本内容
box.innerText = '内容被修改了';
//5.设置标签文本内容
box.innerHTML = '内容又被修改了';
//6.添加新的标签/内容中可以有标签
box.innerHTML = '<h1>内容怎么老被修改</h1>';
</script>
</body>
</html>
