什么是DOM？
Document Object Model(DOM 文档对象模型)是HTML和XML文档的编程接口， DOM相当于是文档的一种规范， 可以通过编码对DOM结构进行访问， 作用就是改变页面的构成， 样式， 内容。DOM将web页面文档解析成由节点和若干对象（包含属性和方法的对象）组成的集合。
我们经常听到的DOM树就类似于下面这种情况
Snip20180421_6.png
如何访问DOM？
当在创建一个脚本时， 无论是使用内嵌或者是<script>标签都可以通过window和document提供的API来操作文档或者是获取节点。
比如：
<!-- 在页面加载的时候弹出提示框 -->
<body onload="window.alert('welcome to my home page!');">
也可以这么做
<script>
// 页面加载完成后调用该函数
window.onload = function() {
// 创建一个新的标签h1
heading = document.createElement("h1");
// 创建一个新的文本节点
heading_text = document.createTextNode("Big Head!");
// 把文本节点放入到h1 标签中， 也就是说h1的内容为 "Big Head！"
heading.appendChild(heading_text);
// 把h1 标签追加到body中可以显示出来
document.body.appendChild(heading);
}
</script>
DOM的几种数据类型
document 表示的就是DOM树， 表示文档本身
element 表示一个元素或者节点
nodeList 是一个元素数组， 包含多个元素， 可以通过node[1] 或者node.item(1)访问
attribute 表示节点或者元素的属性
需要注意的问题
整个文档是一个文档节点
每个HTML元素是一个元素节点
HTML中的文本是文本节点
HTML的属性是属性节点
每个文档节点都会有一个根（root)节点
每个节点都会有父节点（parent 除了根节点）
每个节点都会有若干个子节点(child)
同胞（sibling）节点就意味着有相同的父节点
DOM API的种类
获取节点
getElementById() 根据ID获取元素
getElementsByTagName() 返回一个或多个带有指定标签的元素集合
getElementsByClassName() 返回指定className的元素集合
创建节点
createElement() 创建元素节点
createTextNode() 创建文本节点
属性操作
createAttribute() 创建属性节点
getAttribute() 返回指定的属性值
setAttribute() 指定属性设置或修改为指定的值
增加、删除、替换节点
appendChild() 把节点追加到指定节点
removeChild() 删除子节点
replaceChild() 替换子节点
insertBefore() 在指定的子节点前面插入新的节点
获取元素内容
innerHTML 获取元素内容
childNodes 和 nodeValue
nodeName 节点的名称
nodeValue 节点的值
比如在页面中
<h1 id='h'>welcom to china~</h1>
// 通过innerHTML获取
var txt = document.getElementById('h').innerHTML;
console.log(txt);
// 通过childNodes 和 nodeValue获取
var text = document.getElementById('h').childNodes[0].nodeValue;
console.log(text);
修改样式
var element = document.getElementById('h');
element.style.color = 'blue';
事件操作
DOM允许JavaScript对HTML的事件作出相应
// 页面中的h1 标签
<h1 onmouseover="mouseOn(this)"
onmouseout ="mouseOut(this)"
>welcom to china~</h1>
// 对应的js脚本
// 鼠标悬停到h1 标签上， 修改文本为 Mouse On Now!!!
function mouseOn(obj) {
obj.innerHTML = "Mouse On Now!!!";
}
// 鼠标不再悬停在标签上面的时候， 显示 Mouse out Now!!!
function mouseOut(obj) {
obj.innerHTML = 'Mouse out Now!!';
}
还有其他事件：
onclick 点击（先onmousedown 然后 onmouseup 这两个过程完成后才触发onclick）
onload 进入/加载界面
onunload 开开界面
onchange 输入事件
onmousedown 鼠标点击
onmouseup 鼠标点击后摊开
网友评论