DOM节点(元素节点、文本节点、属性节点)
元素节点：可以理解为标签元素，如head/title/body/h1/p 特殊的，还有根结点document
文本节点：可以理解为<>外的文本，没有子节点
属性节点：描述元素节点的信息、属性的节点；依附于元素节点
通过id属性查找元素
getElementById()
如：
<html>
<head>
<script type="text/javascript">
function testGetElement(id)
{
var a_blog = document.getElementById(id);
alert("确定访问"+a_blog.href);
}
</script>
</head>
<body>
<a id="mybolg" οnclick="testGetElement(this.id)" href="http://blog.csdn.net/y200930690129">我的博客</a>
</body>
</html>
通过标签名称查找元素
getElementsByTagName("TagName")
如：
<html>
<head>
<script type="text/javascript">
function testGetElement()
{
var test_ul = document.getElementsByTagName("ul");
var test_ul1 = test_ul[1];
var test_items = test_ul1.getElementsByTagName("li");
for(var i=0; i<test_items.length; i++){
alert(test_items[i].nodeName);
}
}
</script>
</head>
<body>
<ul οnmοuseοver="testGetElement()">
<li>
1_test1
</li>
<li>
1_test2
</li>
</ul>
================================
<ul οnmοuseοver="testGetElement()">
<li>
2_test1
</li>
<li>
2_test2
</li>
</ul>
</body>
</html>
通过类名查找元素
属性：className
通过document.all 或 document.getElementsByTagName("*") 获得文档中所有元素，
然后用正则表达式判断对应的className是否是所需节点
如：
<html>
<head>
<script type="text/javascript">
function testGetElement(test_class)
{
var elementArray = [];
if(typeof document.all != "undefined"){
elementArray = document.all;
}else{
elementArray = document.getElementsByTagName("*");
}
var pattern = new RegExp("(^| )"+test_class+"( |$)");
for(var i=0; i<elementArray.length; i++){
if(pattern.test(elementArray[i].className)){
alert("确定访问"+elementArray[i].href);
}
}
}
</script>
</head>
<body>
<a class="link_test" οnclick="testGetElement(this.className)" href="http://blog.csdn.net/y200930690129">我的博客</a>
</body>
</html>
还可以通过遍历DOM树的方法访问节点
查找父节点 parentNode
查找子节点 childNodes firstChild lastChild
查找兄弟节点 previous nextSibling
770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
