DOM

2018-10-09 本文已影响0人索伯列夫

HTML DOM定义了访问和操作HTML文档的标准方法。换言之，就是如何获取、修改、添加或删除HTML元素的标准。

HTML DOM树

DOM节点

HTML文档的所有内容都是节点

整个文档就是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点

节点树中的节点有层级关系，描述为parent、child、sibling等。

DOM 方法

方法是我们可以在节点上执行的动作（比如添加或修改元素）
属性是我们能够获取或设置的值（比如节点的名称或内容）

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

DOM属性

属性是节点的值，可以获取或者设置

innerHTML属性：获取元素内容
nodeName属性：获取节点的名称
nodeValue属性：获取节点的值
nodeType属性：返回节点的类型（元素１，属性２，文本３）

<div id="div1">huahua</div>
var txt = div1.innerHTML
console.log(txt) //huahua
var name = div1.nodeName
console.log(name) //huahuaDiv
var value = div1.nodeValue
console.log(value) //null
var type = div1.nodeType
console.log(type) //1

DOM访问（查找元素）

几种方法：

getElementById()
getElementsByTagName()
getElementsByClassName()

<div class='first' id="div1">huahua</div>
<div id="div2">huahua</div>

var id = document.getElementById('div1')
console.log(id) 
//<div id="div1">huahua</div>
var tagName = document.getElementsByTagName('div')
console.log(tagName)
//HTMLCollection(2) [div#div1, div#div2, div1: div#div1, div2: div#div2]
var className = document.getElementsByClassName('first')
console.log(className)
//HTMLCollection [div#div1.first, div1: div#div1.first]

DOM修改

改变：元素、样式、时间

修改HTML元素

改变HTML内容
改变CSS样式
改变HTML属性
创建新的HTML元素
删除已有的HTML元素
改变样式

改变HTML内容

直接使用inneeHTML属性可以做到

<div id="div1"></div>
div1.innerHTML = 'huahua'

改变HTML样式

上例中，通过div1.style.color = 'blue'可以改变字体颜色

创建新的HTML元素

通过createElement() appendChild()创建，
过程：首先创建该元素，然后将其追加到已有元素上

<div id="div1"></div>

div1.innerHTML = 'huahua'
var div2 = document.createElement('div')
div2.innerHTML = 'test'
div1.appendChild(div2)

通过insertBefore()创建，

<div id="div0"></div>
div0.innerHTML = 'huahua'
div0.style.border = '1px solid red'
var div1 = document.createElement('div')
div1.innerHTML = 'test1'
div1.style.border = '1px solid green'
div0.appendChild(div1)

var div2 = document.createElement('div')
div2.innerHTML = 'test2'
div2.style.border = '1px solid green'
div0.appendChild(div2)

var div3 = document.createElement('div')
div3.innerHTML = 'test3'
div0.insertBefore(div3,div2)

效果图

删除HTML元素

removeChild()
删除元素前，必须清楚它的父元素
div0.removeChild(div2)

效果图

替换HTML元素

replaceChild()给上述代码追加，

var p = document.createElement('p')
p.innerHTML = '这是一个p'
div0.replaceChild(p,div2)

效果图

DOM事件

onclick(),onload,onUnload,onchange,onmouseover onmouseout,onmousedown onmouseup...

补充

对象
Node对象包含：Element、Text、Document、Comment
页面上的节点，由其对象的构造函数，生成。
DocumentFragment优化

DOM