1、什么是DOM
DOM，文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的的标准编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。
2、DOM历史
DOM的历史可以追溯至1990年代后期微软与Netscape“浏览器大战”（browser wars），双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示，为解决该问题DOM应运而生。目前W3C对DOM进行标准化有Level 1、Level 2、Level 3、Level 4。
3、DOM常用操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<div class="xxx">xxx</div>
<div class="yyy">yyy</div>
<div id="xxx"></div>
<img src="" alt="a">
</div>
</body>
</html>
3.1DOM API 获取元素的方法
元素查询的API返回的的结果是DOM节点或者DOM节点的列表。
// 返回当前文档中第一个类名为 "xxx" 的元素
var x1 = document.querySelector(".xxx")
// 返回一个文档中所有的class为"xxx"或者 "yyy"的div元素
var xy = document.querySelectorAll("div.xxx, div.yyy")
// 获取元素
var x2 = document.getElementById('xxx')
var x3 = document.getElementsByClassName('xxx')
var img = document.getElementsByTagName('img')
Element也提供了很多相对于元素的DOM操作方法
// 获取父元素、父节点
var p1 = x1.parentElement
var p2 = x1.parentNode
// 获取子节点，子节点可以是任何一种节点
var c1 = p1.children
// 查询子元素
var els = ele.getElementsByTagName('td')
var els = ele.getElementsByClassName('highlight')
// 当前元素的第一个/最后一个子元素节点
var f1 = 01.firstElementChild
var l1= p1.lastElementChild
// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling
var el = ele.previousElementSibling
var x1 = document.querySelector(".xxx")
var xy = document.querySelectorAll("div.xxx, div.yyy")
var x2 = document.getElementById('xxx')
var x3 = document.getElementsByClassName('xxx')
var img = document.getElementsByTagName('img')
var p1 = x1.parentElement
var p2 = x1.parentNode
var c1 = p1.children
var f1 = p1.firstElementChild
var l1 = p1.lastElementChild
console.log('x1')
console.log(x1)
console.log('xy')
console.log(xy)
console.log('x2')
console.log(x2)
console.log('x3')
console.log(x3)
console.log('img')
console.log(img)
console.log('p1')
console.log(p1)
console.log('p2')
console.log(p2)
console.log('c1')
console.log(c1)
console.log('f1')
console.log(f1)
console.log('l1')
console.log(l1)
3.2DOM API 增加节点
DOM节点创建最常用的方法有
var el1 = document.createElement('div')
var el2 = document.createElement('input')
var node = document.createTextNode('hello world!')
3.3DOM API 更改节点
// 添加子元素，node 是要插入子节点的父节点，child 即是参数又是这个方法的返回值
node.appendChild(child)
// 替换子元素
parentNode.replaceChild(newChild, oldChild)
// 插入子元素，如果referenceElement为null则newElement将被插入到子节点的末尾。如果newElement已经在DOM树中，newElement首先会从DOM树中移除。referenceElement 在插入newElement之前的那个节点
parentElement.insertBefore(newElement, referenceElement)
3.4DOM API 删除节点
// 删除节点
node.removeChild(child)
3.5DOM其他常用API
// 在为属性设置值之前检测该属性是否存在,element.hasAttribute()为返回的布尔值：true 或 false。
var d = document.getElementById("div1");
if (d.hasAttribute("align")) {
d.setAttribute("align", "center")
}
// 读取元素的所有属性
var x= document.getElementById("xxx")
x.attributes
4、小结
关于DOM的API还有很多，在此就不一一介绍，大家可以通过MDN来进行了解。
网友评论