javascript学习(7)Dom
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 onload="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条数据的测试没有发现速度有所提升，反倒慢了。。。
浙公网安备 33010602011771号