JavaScript对HTML DOM文档树的常用操作
ybfh9894
9年前
所有HTML元素都拥有的属性:id,title,lang,dir,className。
DOM集合：
- document.images 文档中所有图片集合
- document.images[0] 等价document.images.item(0) 第一个图片
- document.images.length 元素长度
JavaScript获取元素的三种方法：
- document.getElementById()
- document.getElementByTagName()
- document.getElementByClassName()
<!DOCTYPE html> <html> <head> <style> .box{ width:500; height:500; } </style> <script> function f1(){ var d1 = document.getElementById('d1'); var d2 = document.getElementByTagName('div'); var d3 = document.getElementByClassName('box'); } </script> </head> <body onload = "f1()" > <div id="d1" class="box"> <p>这只是一个例子</p> </div> </body> </html> 节点属性:
- nodeName
- nodeValue
- nodeType 值为1-12. 1是元素节点；2是属性；3是文本节点
- parentNode
- childNode
- firstNode
- lastNode
- previousSibling 前一个兄弟节点
- nextSibling 后一个兄弟节点
- attributes 属性集合
<!DOCTYPE html> <html> <head> <script> function f1(){ var node = document.getElementById('d1'); alert(node.nodeName); } </script> </head> <body onload = "f1()" > <div id="d1"> <p>这只是一个例子</p> </div> </body> </html> 关于节点操作的方法：
- createElement() 创建元素节点
- createTextNode() 常见文本节点
- createAttribute()创建属性节点
- appendChild() 追加子节点
- insertBefore() 在指定子节点前插入新子节点
- removeChild() 删除子节点
- replaceChild() 替换子节点
<!DOCTYPE html> <html> <head> <script> function f1(){ //给div追加一个段落 var div = document.getElementById('d1'); var newP = document.craeteElement('p'); var textNode = document.createTextNode('This is an demo.'); newP.appendChild(textNode); div.appendChild(newP); } </script> </head> <body onload = "f1()" > <div id="d1"> <p>这只是一个例子</p> </div> </body> </html> 关于属性操作的方法：
- getAttribute(attrName) 获取属性对应的值
- setAttribute(attrName,value)
- removeAttribute(attrName)
- hasAttribute(attrName) 是否有某属性