`

DOM节点中属性nodeName、nodeType和nodeValue的区别

阅读更多

()nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

 

()nodeValue

对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

 

()nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是:

元素类型 节点类型

元素element 1

属性attr 2

文本text 3

注释comments   8

文档document   9

 

看下面例子(摘自网络):

 

html片段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>DOM节点中属性nodeName、nodeType和nodeValue的区别</title>  
<script type="text/javascript" src="test.js"></script>  
</head>  
<body>  
<h1 id="h1">An HTML Document</h1>  
<p id="p1">This is a <i>W3C HTML DOM</i> document.</p>  
<p><input id="btnDemo1" type="button" value="取H1 Element节点值"></p>  
<p><input id="btnDemo2" type="button" value="取H1 Element节点文本"></p>  
<p><input id="btnDemo3" type="button" value="取Document Element节点文本"></p>  
<p><input type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="btnShowAttr" id="btnShowAttr" value="按钮节点演示" /></p>  
</body>  
</html>  

 js片段

 

 

function showElement() {
    var element = document.getElementById("h1");// h1是一个<h1>标签
    alert('nodetype:' + element.nodeType);// nodeType=1
    alert('nodeName:' + element.nodeName);
    alert('nodeValue:' + element.nodeValue); // null
    alert('element:' + element);
}

function showText() {
    var element = document.getElementById("h1");
    var text = element.childNodes[0];
    alert('nodeType:' + text.nodeType); // nodeType=3
    alert('nodeValue:' + text.nodeValue); // 文本节点的nodeValue是其文本内容
    text.nodeValue = text.nodeValue + "abc"; // 文本内容添加修改删除等等。
    alert('nodeName:' + text.nodeName);
    alert(text.data); // data同样是其内容,这个属性下同样可以增删改。
}

function showDocument() {
    alert('nodeType:' + document.nodeType); // 9
    alert('nodeName:' + document.nodeName);
    alert(document);
}

function showAttr() {
    var btnShowAttr = document.getElementById("btnShowAttr"); // 演示按钮,有很多属性
    var attrs = btnShowAttr.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var attr = attrs[i];
        alert('nodeType:' + attr.nodeType); // attribute 的nodeType=2
        alert('attr:' + attr);
        alert('attr.name:' + attr.name + '=' + attr.value);
    }
}

function demo() {
    var btnDemo1 = document.getElementById("btnDemo1");
    btnDemo1.onclick = showElement; // 按钮1取节点nodetype值
    var btnDemo2 = document.getElementById("btnDemo2");
    btnDemo2.onclick = showText;
    var btnDemo3 = document.getElementById("btnDemo3");
    btnDemo3.onclick = showDocument;
    var btnShowAttr = document.getElementById("btnShowAttr");
    btnShowAttr.onclick = showAttr;
}
window.onload = demo;

 

 

 

分享到:
评论

相关推荐

    DOM下的节点属性和操作小结

    属性: 1 .nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。...文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性,要

    jacascript DOM节点——元素节点、属性节点、文本节点

     元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nodeValue:null;  其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document;  元素的 childNodes 属性中...

    HTML DOM的nodeType值介绍

    属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:nodeName 所包含的 XML 元素的标签名称永远是大写的 nodeValue 对于文本节点,nodeValue 属性包含...

    浅谈Javascript中的12种DOM节点类型

    一般地,节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。 节点类型不同,这三个属性的值也不相同 nodeType nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常...

    JS实现访问DOM对象指定节点的方法示例

    使用getElementById()方法来访问指定id的节点,并用nodeName属性、nodeType属性和nodeValue属性来显示出该节点名称、节点类型和节点值。 1、nodeName属性 该属性用来获取某一个节点的名称。 [sName=]obj.nodeName ...

    js DOM模型操作

    DOM模型中的节点:元素节点、文本节点、属性节点 例:私のdotnet小屋&lt;/a&gt; (1)a是元素节点 (2)“私のdotnet小屋”是文本节点 (3)href=”http://www.cnblogs.com/shuz”是属性节点 DOM节点的属性 属性 类型...

    JavaScript HTML DOM元素 节点操作汇总

    在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9...

    javascript获取元素文本内容的通用函数

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]将HTML DOM中几个容易常用的属性做下记录: nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。 nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是...

    javascript dom 操作详解 js加强

    1 、文档里的每个节点都有属性 nodeName 、 nodeValue 、 nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读属性 nodeValue 1 元素节点 2 属性节点 3 文本节点 只读属性 nodeType 不能用于元素节点 ...

    整理JavaScript对DOM中各种类型的元素的常用操作

    节点类型 nodeType 以下是一些重要的nodeType的取值: 1: 元素element 2: 属性attr ...同时通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。 操作节点 a

    关于javascript document.createDocumentFragment()

    也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling,

Global site tag (gtag.js) - Google Analytics