什么是DOM
DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。
这个说法很官方，大家肯定还是不明白。
简而言之，DOM可以理解为一个访问或操作HTML各种标签的实现标准。比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
</body>
</html>
比如我们在这个HTML模板中如何获取title标签里的内容？
DOM.png
下面是DOM节点树
DOM节点.png
document 对象
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。
document 对象常用属性
- doctype
- head
- body
head.png
location
location属性返回一个只读对象，提供了当前文档的URL信息.
document.location.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"
// 跳转到另一个网址
document.location.assign('http://www.google.com')
// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载（默认值）
document.location.reload(false)
// 跳转到另一个网址，但当前文档不保留在history对象中，
// 即无法用后退按钮，回到当前文档
document.location.assign('http://www.google.com')
// 将location对象转为字符串，等价于document.location.href
document.location.toString()
虽然location属性返回的对象是只读的，但是可以将URL赋值给这个属性，网页就会自动跳转到指定网址。
document.location = 'http://www.example.com';
// 等价于
document.location.href = 'http://www.example.com';
title、characterSet
title属性返回当前文档的标题，该属性是可写的
characterSet属性返回渲染当前文档的字符集
** innerHTML、outerHTML、innerText **
获取里面的内容，必须是元素为ID的元素
innerHTML 获取元素内部的标签和内容
outerHTML 获取元素所有的标签和内容，包括自身的标签
innerText 获取元素的文本内容
三种比较.png
document对象常用方法
open() 、close()、write()
document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容
document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。
三种方法.png
Element
Element有几个重要属性
- nodeName：元素标签名，还有个类似的tagName
- nodeType：元素类型
- className：类名
- id：元素id
- children：子元素列表（HTMLCollection）
- childNodes：子元素列表（NodeList）
- firstChild：第一个子元素
- lastChild：最后一个子元素
- nextSibling：下一个兄弟元素
- previousSibling：上一个兄弟元素
- parentNode、parentElement：父元素
添加元素
createElement()
createElement方法用来生成HTML元素节点。createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。
createTextNode()
createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
删除元素
删除元素使用removeChild()方法即可
修改元素
appendChild()
在元素末尾添加元素
insertBefore()
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
document.getElementById("myList").insertBefore(newItem,existingItem);
在某个元素之前插入元素
replaceChild()
replaceChild()接受两个参数：要插入的元素和要替换的元素
查询元素
getElementById()
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
getElementsByClassName()
getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
getElementsByTagName()
getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByName()
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
querySelector()
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
1.png
2.png
elem.children和elem.childNodes的区别？
elem.children 只会返回其包含的子元素节点，不会返回空白（文本）节点
elem.childNodes 返回所有的节点包括空白（文本）节点。
Paste_Image.png
属性操作
getAttribute()
getAttribute()用于获取元素的attribute值
createAttribute()
createAttribute()方法生成一个新的属性对象节点，并返回它。
setAttribute()
setAttribute()方法用于设置元素属性
romoveAttribute()
removeAttribute()用于删除元素属性
元素属性.png
相关文档参考
What is the DOM?
各浏览器中的 NodeList 接口存在差异
Difference between HTMLCollection, NodeLists, and arrays of objects
饥人谷
网友评论