13 - HTML DOM

13 - HTML DOM

一、什么是DOM？

DOM（Document Object Model）即文档对象模型，是 W3C（万维网联盟）的标准，DOM 定义了访问 HTML 和 XML 文档的标准，DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法，换句话说，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

二、DOM的基本操作

1. 查询元素

//根据id获取元素

document.getElementById('div1');

// 根据标签名称获取元素集合

document.getElementsByTagName('li');

document.getElementsByTagName('*'); //获取页面所有元素

//根据class类获取元素集合(低版本IE不支持)

document.getElementsByClassName('div1');

//根据name获取元素

<div name='a></div>

document.getElementsByName('a');

2. 创建元素

var d = document.createElement('div');//创建一个div标签

document.body.appendChild(d); //把创建好的标签添加到页面上（Body）

3. 删除元素

不能越级删除，只能删除子元素，不能删除孙元素，并且一次只能删除一个

document.body.removeChild('div1'); 

div1.removeChild(document.getElementsByTagName('ul')[0]); //删除div1下的第一个ul

4. 修改元素

元素不能直接修改，只能先删除再创建

5. 获取行间样式

<div id='div1' style='width=200px;height:200px;'></div>

div1.style.color

div1.style['color']

6. 获取非行间样式(只能获取，不能设置，修改样式只能通过行间样式)

//版本IE不支持

var res = getComputedStyle(div1,null)['width']; 

//低版本IE写法,其他浏览器不支持，只在IE下生效

var res = div1.getCurrentStyle['width'];

//兼容写法：

function getStyle(elem.attr){

    if(elem.getCurrentStyle){

        return elem.getCurrentStyle[attr];

    }else{

        return getComputedStyle(elem,null)[attr];

    }

}

7. 自定义属性

自定义属性主要用来存储数据

设置属性

node.setAttribute('name','value');

获取属性

node.getAttribute('name'); 

删除属性

node.removeAttribute('name');

8. DOM节点

DOM节点信息包括节点类型（nodeType）、节点名称（nodeName）、节点值（nodeValue）。

节点类型包括：

元素节点

属性节点

文本节点

创建节点

document.createElement('元素标签');

向当前节点的子节点列表末尾添加新的子节点

parentNode.appendChild('nodeName');

向已知的子节点前插入一个新的子节点

parentNode.insertBefore('nodeName');

删除节点

parentNode.removeChild('nodeName');