DOM节点例子

elementNode.setAttribute(name,value)

1.name: 要设置的属性名。

2.value: 要设置的属性值。

elementNode.getAttribute(name)

1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

2. name:要想查询的元素节点的属性名字

元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)
文本节点:包含在元素节点中。
属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。

nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释:nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

elementNode.childNodes

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,它具有length属性。如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

node.lastChild

获取指定节点的节点

elementNode.parentNode

注意:父节点只能有一个。

访问节点:

elementNode.parentNode.parentNode

 nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)
nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。
 previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
nodeObject.previousSibling
说明:如果无此节点,则该属性返回 null。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body><div>  
            <span id="span">各类节点</span>  
        </div>  
        <script type="text/javascript">
            window.onload = function() {
                var element = document.getElementById("span");
                var text = element.firstChild;
                var property = document.getElementById("span").getAttributeNode("id");
                //nodeName
                alert("这是元素节点的返回值:" + element.nodeName); //返回的标签名SPAN,注意是大写的
                alert("这是文本节点的返回值:" + text.nodeName); //返回的#text  
                alert("这是属性节点的返回值:" + property.nodeName); //返回的是属性名,这里是id
                //nodeValue
                alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,返回的是null  
                alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值  各类节点  
                alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值 span  
                //nodeType
                alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1  
                alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3  
                alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2  
            }
            
        </script>
    </body>

</html>

 

posted @ 2017-09-14 00:39  鱼樱前端  阅读(268)  评论(0编辑  收藏  举报