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');
发表评论 取消回复