概念
- 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。
- DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web 页面和脚本或编程语言连接起来了。
- 要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的
document 对象
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。
| 属性/方法 | 描述 |
|---|---|
| document.doctype | 返回与文档相关的文档类型声明 (DTD) |
| document.title | 返回当前文档的标题。 |
| document.characterSet | 返回文档使用的字符集 |
| document.head | 返回当前文档的 <head>元素 |
| document.body | 返回文档的body元素 |
| document.images | 返回对文档中所有Image 对象引用 |
| document.location | 返回一个只读对象，提供了当前文档的URL信息 |
| document.open() | document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容 |
| document.close() | document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了 |
| document.write() | 用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面 |
Element对象
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作
| 属性/方法 | 描述 |
|---|---|
| nodeName | 元素标签名，还有个类似的tagName |
| nodeType | 元素类型 |
| className | 类名 |
| id | 元素id |
| parentNode | 父节点 |
| parentElement | 父元素 |
| childNodes | 子节点 |
| children | 子元素 |
| firstChild | 第一个子节点 |
| firstElementChild | 第一个子元素 |
| lastChild | 最后一个子节点 |
| lastElementChild | 最后一个子元素 |
| previousSibling | 某个元素的前一个兄弟节点 |
| previousElementSibling | 某个元素的前一个兄弟元素 |
| nextSibling | 某个元素的后一个兄弟节点 |
| nextElementSibling | 某个元素的后一个兄弟元素 |
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="cc">
<li>哈哈</li>
<li>呵呵</li>
<li id="three">哦哦</li>
<li>噢噢</li>
<li>呃呃</li>
</ul>
</div>
</script>
<script>
//12行代码:都是获取节点和元素的
//ul
var ulObj=document.getElementById("cc");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentElement);
//子节点
console.log(ulObj.childNodes);
//子元素
console.log(ulObj.children);
==============================================
//第一个子节点
console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//某个元素的前一个兄弟节点
function abc$(id) {
return document.getElementById(id);
}
console.log(abc$("three").previousSibling);
//某个元素的前一个兄弟元素
console.log(abc$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(abc$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(abc$("three").nextElementSibling);
//总结:凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点
//凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素
//从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
1.查询元素
| 属性/方法 | 描述 |
|---|---|
| querySelector( ) | 返回匹配指定的CSS选择器的元素节点。推荐使用）
|
| querySelectorAll( ) | 返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。推荐使用
|
| getElementById( ) | 返回匹配指定ID属性的元素节点 |
| getElementsByClassName( ) | 返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身） |
| getElementsByTagName( ) | 返回所有指定标签的元素（搜索范围包括本身） |
| getElementsByName( ) | 用于选择拥有name属性的HTML元素 |
2.创建元素
| 属性/方法 | 描述 |
|---|---|
| createElement( ) | 用来生成HTML元素节点 |
| reateTextNode( ) | 用来生成文本节点，参数为所要生成的文本节点的内容 |
| createDocumentFragment( ) | 生成一个DocumentFragment对象 |
3.修改元素
| 属性/方法 | 描述 |
|---|---|
| appendChild() | 在元素末尾添加元素 |
| insertBefore() | 在某个元素之前插入元素 |
| replaceChild() | 接收两个参数：要插入的元素和要替换的元素 |
4. 删除元素
| 属性/方法 | 描述 |
|---|---|
| removeChild()； | 删除元素 |
clone元素
cloneNode()方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身
属性操作
| 属性/方法 | 描述 |
|---|---|
| removeAttribute() | 用于删除元素属性 |
| setAttribute("属性的名字","属性的值") | 用于设置元素属性 |
| getAttribute("属性的名字") | 用于获取元素的attribute值 |
| createAttribute() | 生成一个新的属性对象节点，并返回它 |
innerText
innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容`
<div>
<p>
123
<span>456</span>
</p>
</div>
外层div的innerText返回内容是 "123456"
innerHTML
innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM
<div>
<p>
123
<span>456</span>
</p>
</div>
外层div的innerHTML返回内容是 "<p>123<span>456</span></p>"
innerText与innerHTML区别：
设置：
1.如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
2.innerHTML是可以设置文本内容
3.innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
4.想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
获取：
1.innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
2.innerHTML才是真正的获取标签中间的所有内容
1.如果想要(获取)标签及内容,使用innerHTML
2.如果想要设置标签,使用innerHTML
3.想要设置文本,用innerText,或者innerHTML,或者textContent
常见的使用方式
1.修改样式
可修改元素的 style 属性，修改结果直接反映到页面元素
document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'
2.获取样式 getComputedStyle
使用getComputedStyle获取元素计算后的样式，不要通过
node.style.属性获取
var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)
3.class 操作
var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //删除 class
nodeBox.classList.toggle('active') //新增/删除切换
node.classList.contains('active') // 判断是否拥有 class
注：样式的改变尽量使用 class 的新增删除来实现
4.页面宽高
element.clientHeight
element.clientHeight.jpg
element.offsetHeight
element.offsetHeight.jpg
HTMLCollection 和 NodeList
1.节点都是单个对象，有时会需要一种数据结构，能够容纳多个节点。DOM提供两种集合对象，用于实现这种节点的集合：NodeList和HTMLCollection。
2.NodeList 对象代表一个有顺序的节点列表，HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性
以下方法获取的为HTMLCollection对象
document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.forms //所有form元素
document.scripts //所有script元素
document.body.children
document.getElementsByClassName("class1")
以下方法获取的为NodeList对象
document.getElementsByName("name1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.body.childNodes
如何查看？
document.body.childNodes.constructor
注：
HTMLCollection与NodeList基本相似
- 相同点： 都是类数组对象，节点的变化都会实时反映在集合中
- 不同点： 少部分方法不一样，比如 NodeList 有 forEach 方法，而 HTMLCollection 没有
