DOM core中
获取元素的方法
getElementById
通过元素的id属性获取对象
getElementsByTagName
通过元素标签名获取对象,是一个数组
getElementsByClassName
通过元素的class属性获取对象,也是一个数组
获取对象的子节点的属性
[elt].childNodes
获取某对象下的所有子节点,是一个数组来着的
其中有一些简写
比如:firstChild <==> [elt].childNodes[0] <font color="green">某对象的第一个子节点</font>
还有:lastChild <==> [elt].childNodes[childNodes.length-1] <font color="green">某对象的最后一个子节点</font>
[elt].parentNode
获取某元素节点的父元素节点,只有一个对象
[elt].previousSibling
获取某元素节点的上一个兄弟元素节点
[elt].nextSibling
获取某元素节点的下一个兄弟元素节点
[elt].nodeType
判断某个元素的子节点的属性,返回一个数字
有三个常用的需要记住:
1:Element 元素节点
2:Attribute 属性节点
3:Text 文本节点
[nod].nodeName
返回这个节点的节点名
节点名有两种
- 元素名,例如P,BODY,DIV
text 文本节点or节点的属性值
[elt].nodeValue
获取某个节点的文本值
创建节点的方法及节点间的操作
createElement(nodeName)
在DOM结构外创建一个元素(p、div、span等)
createTextNode("string")
在DOM结构外创建一个文本节点
parent.appendChild(son)
往parent中的末尾追加son节点
<html> <div id="mydiv"></div> </html> <script> window.onload=function(){ var mydiv = document.getElementById("mydiv"); var parp = document.createElement("p"); mydiv.appendChild(parp); /*将create的p元素append进div之中;*/ } </script>
parent.insertBefore(newElt,targetElt)
在parent中,将newElt添加在targetElt之前
*insertAfter(newElt,targetElt)
<font style="color:green">实际上在js中并不存在insertAfter的方法,不过我们可以自己编一个insertAfter的函数,然后调用</font>
function insertAfter(newElt,targetElt){
var parent = targetElt.parentNode;
if(targetElt == parent.lastChild){
parent.appendChild(newElt);
}else {
parent.insertBefore(newElt,targetElt.nextSibling);
}
}
节点的属性获取及操作
[node].getAttribute("attr")
获取该节点的attr属性的值
[node].setAttribute("attr","value")
将该节点中的attr属性的值设置为value
HTML-DOM中
在HTML-DOM中有一些类似HTML core的操作,但是要比core的篇幅要小,在浏览器呈现正宗的XHTML文档(即MIME类型是application/xhtml_xlm的XHTML文档)时会被直接忽略掉,但是在普通的html中,很灵活。
下面列一些常用的HTML-DOM
常见的HTML DOM
[img].src | 直接获取或者修改img对象中的src属性 |
---|---|
[a].href | 直接获取或者修改a对象中的href属性 |
[input].value | 直接获取或者修改input对象中的value属性 |
document.forms | 获取document下所有的form表单元素 |
document.body | 获取文档中的body元素对象 |
特殊的HTML-DOM
document.innerHTML 获取或者修改document对象下的所有“HTML代码”
例如:
<body>
<div id="test">
<p>This is <em>my</em> content.</p>
</div>
</body>
<script>
var mydiv = document.getElementById("test");
console.log(mydiv.innerHTML);
//<p>This is <em>my</em> content.</p>;
//获取该div元素下的所有html代码(包括所有空白符)
</script>
```
网友评论