JavaScript5 节点的处理

node的常用属性和方法  Tuesday, 22 May, 201211:36

nodeName String节点名称，根据节点的类型而定义

nodeValue String 节点的值 根据节点的类型而定义

nodeType Number 节点类型

firstChild Node 指向childNodes 列表中的第一个节点。

lastChild  Node 指向childNodes列表仲的最后一个节点。

childNodes NodeList 所有子节点的列表，方法item(i)可以访问第i+1个节点。

parentNode Node 指向节点的父节点，如果已是根结点则返回null；

previousSibling Node 指向前一个兄弟节点

nextSibling Node 指向后一个兄弟节点

hasChildNodes() Boolean 当chileNodes包含一个或多个节点时，返回ture。

5.3.4 设置节点属性

getAttribute()方法和setAttribute()

 

<html>
<head>
<script>
function myDOMInspector(){
    var myImg = document.getElementByTagName("img")[0];
    alert(myImg.getAttribute("title"));
}
</script>
<body onload = "myDOMInspector">
<img src="01.jpg" title = "情人坡"/>
</body>
</head>
</html>

 

 

 

5.3.5 创建和添加节点

 

<script language = "javascript">

function createP(){

    var oP = document.creatElement("p");

    var oText = document.creatTextNode("这是一段感人的故事");

    oP.appendChild(oText);

    document.body.appendChild(oP);

}

</script>

 

 

 

5.3.6 删除节点

 

<html>

<head>

<title>删除节点</title>

<script language = "javacript/text">

    var oP = document.getElementByTagName("p")[0];

　 op.parentNode.removeChild(oP);

</script>

</head>

</html>

 

 

 

5.5 DOM 与 CSS

5.5.1 三位一体的页面

结构、表现、行为。

5.5.2 使用clsaaName属性

DOM还有一个非常使用的className属性，可以修改一个节点的CSS类别。

 

<html>
<head>
<style type = "css/text">
.myUL1{

    color:#0000FF;
    font-family:Arial;
    font-weight:bold;

}
.myUL2{

    color:#FF0000;
    font-family:Grorgia,"Times New Roman", Times, serif;

}
</style>
<script language = "javascript/text">
function check(){
       var oMy = document.getElementByTagName("ul")[0];
　　 oMy.className = "myUL2";
}
</script>
</head>
<body>
<ul onclick = "check()" class = "myUl1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>

 

posted @ 2012-05-23 09:06  巴拉库  阅读(171)  评论(0)  编辑  收藏  举报