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 = document.getElementById('test'); var lis = test.getElementsByTagName('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浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。
2:Javascript中取得某个元素的方法有:
getElementById('节点id')、getElementsByTagName('标签名')、getElementByName('name属性值');
3:添加、移除、创建元素、复制节点和查找节点以及判断节点类型:
添加:appendChild(newNode)向节点最后添加一个子节点。也可以从一个元素向另一个元素移动元素。参见http://www.w3school.com.cn/jsref/
移除:removeChild(node) 从元素中移除指定的子节点。
创建:creatElement(tagName)创建元素节点。此方法返回一个Element对象。
复制:node.cloneNode(deep)创建节点的拷贝,并返回该副本。deep为布尔值,默认为false,此时克隆节点的所有属性以及他们的值。设置为true时,克隆节点及其属性,以及所有后代。