码迷,mamicode.com
首页 > 其他好文 > 详细

DOM节点例子

时间:2017-09-14 10:37:17      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:function   文本   比较   code   str   onload   nbsp   nts   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

<!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>

 

DOM节点例子

标签:function   文本   比较   code   str   onload   nbsp   nts   dom节点   

原文地址:http://www.cnblogs.com/lhl66/p/7518534.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!