DOM:将HTML看做XML来处理,代表着动态HTML真正的跨平台的,语言独立的解决方案的重要转变
动态HTML:简言之:是HTML动起来,是一种综合性的技术
DOM诞生的催化剂
document.documentElement:返回HTML根元素
var ohtml = document.documentElement;
alert(ohtml.nodeName);
firstChild:获取下级节点的第一个节点的节点名称
ohtml.firstChild.nodeName也可以使用
ohtml.childNodes[0].nodeName
lastChild:获取下级节点的最后一个节点的节点名称
childNodes[0]:获取某个节点的节点列表中的第一个节点
ohtml.childNodes[0].nodeName
childNodes.item(0):和上面的作用一样
childNodes.length:获取子节点数量(第一级子节点)
ohtml.childNodes.length
parentNode:获取节点的父节点
var ohtml = document.documentElement;
var ohead = ohtml.childNodes[0];
var obody = ohtml.childNodes[1];
alert(ohead.parentNode.nodeName);
alert(obody.parentNode==ohtml);
previousSibling:同级节点的上一个节点
nextSibling:同级节点的下一个节点
ownerDocument:指向节点所在的文档
var ohtml = document.documentElement;
var ohead = ohtml.childNodes[0];
var obody = ohtml.childNodes[1];
alert(obody.previousSibling.nodeName);
alert(ohead.nextSibling.nodeName);
访问特性的另外三个方法
getAttribute(name):获取节点中属性为name的属性(Attribute)
var li = document.getElementById('li1').childNodes[0];
alert(li.getAttribute('href'));
setAttribute(name,newvalue):将节点中属性为name的属性值更改为newvalue
li.setAttribute('href','http://www.baidu.com')
removeAttribute(name):删除节点中名称为name的属性
访问指定节点
getElementsByTagName():返回一个列表,这些列表的特点是<后面的节点名称相同
var items = document.getElementsByTagName('a');
for (var i = 0; i < items.length; i++) {
alert(items[i].getAttribute('href'));
}
getElementsByName():获取name属性的值相同的元素,在选择单选按钮时很好用
getElementById()
注意:如果给定的元素匹配某个元素的name属性的值,则也会返回这个元素,当然如果有匹配的ID值,首先返回此元素,如果没有这个元素,则返回name属性的值匹配的元素
这一点在IE8中依然存在,算是IE的一个bug
操作节点
createElement():创建节点
createTextNode():创建文本节点
appendChild()
removeChild():最好使用节点的parentNode属性来删除节点
function deletenode() {
var op = document.body.getElementsByTagName('p')[0];
op.parentNode.removeChild(op);
}
</script>
</head>
<body οnlοad="deletenode();">
在客户端通过js脚本动态创建的节点,是不能通过js程序访问的,比如替换,删除,能够操作(替换,删除)的节点必须不是动态创建的,也就是查看源文件时能够看到的html节点
注:纯属个人见解,后果自负
function replacenode() {
var op = document.createElement("p");
var otext = document.createTextNode('世界你好');
op.appendChild(otext);
var oldop = document.body.getElementsByTagName("p")[0];
alert(oldop.toString());
oldop.parentNode.replaceNode(op, oldop);
}
appendChild():新消息出现在老消息之后
function replacenode() {
var op = document.createElement("p");
var otext = document.createTextNode('世界你好');
op.appendChild(otext);
document.body.appendChild(op);
}
createDocumentFragment():将多次操作合并为一次执行,通过100000条数据的测试没有发现速度有所提升,反倒慢了。。。