DOM常见属性及⽤法
1:innerHTML、outerHTML、innerText、outerText
innerHTML: 设置或获取位于对象起始和结束标签内的HTML。
outerHTML: 设置或获取对象及其内容的HTML。
innerText: 设置或获取位于对象起始和结束标签内的⽂本。
outerText: 设置(包括标签)或获取(不包括标签)对象的⽂本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<ul id="test">
<li><i>点击1</i></li>
<li>点击2</li>
<li>点击3</li>
<li>点击4</li>
</ul>
<script type="text/javascript">
var test = ElementById('test');
script在html中的用法var lis = ElementsByTagName('li');
var handlers = function (nodes) {
var i;
for (i = 0; i < nodes.length; i += 1) {
nodes[i].onclick = function(){
console.log(this.innerHTML);
console.log(this.outerHTML);
console.log(this.innerText);
console.log(this.outerText);
}
}
};
handlers(lis);
#results
//<i>点击1</i>
//<li><i>点击1</i></li>
//点击1
//点击1
</script>
</body>
</html>
特别说明:
  innerHTML是符合W3C标准的属性,⽽innerText只适⽤于IE浏览器,因此,尽可能地去使⽤innerHTM
L,⽽少⽤innerText,如果要输出不含HTML标签的内容,可以使⽤innerHTML取得包含HTML标签的内容后,再⽤正则表达式去除HTML标签。
2:Javascript中取得某个元素的⽅法有:
getElementById('节点id')、getElementsByTagName('标签名')、getElementByName('name属性值');
3:添加、移除、创建元素、复制节点和查节点以及判断节点类型:
移除:removeChild(node) 从元素中移除指定的⼦节点。
创建:creatElement(tagName)创建元素节点。此⽅法返回⼀个Element对象。
复制:node.cloneNode(deep)创建节点的拷贝,并返回该副本。deep为布尔值,默认为false,此时克隆节点的所有属性以及他们的值。设置为true时,克隆节点及其属性,以及所有后代。