Javascript入门学习第八篇 js dom节点属性说明第1/2页

今天我们讲DOM属性。
前面其实我们已经碰过DOM属性了。
比如:
nodeName,nodeType…..今天我们详细的讲解下。

1,nodeName属性  : 节点的名字。
如果节点是元素节点,那么返回这个元素的名字。此时,相当于tagName属性。
比如:
<p>aaaa</p>  : 则返回 p ;
如果是属性节点,nodeName将返回这个属性的名字。
如果是文本节点,nodeName将返回一个#text的字符串。

另外我要说的是: nodeName属性是一个只读属性,不能进行设置.(写)
它返回 大写字母的值。

2,,nodeType属性 : 返回一个整数,代表这个节点的类型。
我们常用的3中类型:
nodeType == 1  : 元素节点
nodeType == 2  : 属性节点
nodeType == 3  : 文本节点
如果想记住的话,我们可以这么去记:
比如: <p  title="cssrain" >test</p>   从前往后读: 你会发现 先是元素节点(1),然后是属性节点(2),最后是文本节点(3),这样你就很容易记住了 nodeType分别代表什么类型了。(我总结的一点小技巧, ^_^。)

nodeType属性经常跟 if 配合使用,以确保不会在错误的节点类型上 执行错误的操作。
比如:
function cs_demo(mynode){
      if(mynode.nodeType == 1){
              mynode.setAttribute("title","demo");
        }
}
代码解释: 先检查mynode的nodeType属性,以确保它所代表的节点确实是 一个元素节点。
和nodeName属性一样,他也是只读属性,不能进行设置.(写)。

3,nodeValue属性 : 返回一个字符串,这个节点的值。
如果节点是元素节点,那么返回null;(注意下)
如果是属性节点,nodeValue将返回这个属性的值。
如果是文本节点,nodeValue将返回这个文本节点的内容。
比如:
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
 var c= document.getElementById("c");
 alert(  c.nodeValue  );//返回null
</SCRIPT>
nodeValue是一个可以读、写的属性。 但它不能设置元素节点的值。
再看看下面的例子:
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
 var c= document.getElementById("c");
  c.nodeValue =" dddddddddddd"; //不能设置
  //alert( c.firstChild.nodeValue ) //元素节点 包括属性节点和文本节点。
  c.firstChild.nodeValue =  "test"//能设置
</SCRIPT>
当然我们为了确保能正确运行:可以加一段代码:
<div id="c">aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
 var c= document.getElementById("c");
  c.nodeValue =" dddddddddddd"; //不能设置
  //alert( c.firstChild.nodeValue )
  if( c.firstChild.nodeType==3 ){ //判断是不是 文本节点
  c.firstChild.nodeValue =  "test"//能设置
  }
</SCRIPT>
//可以看出,如果要设置元素节点,不能直接设置,而必须先使用firstChild或者lastChild等 然后设置nodeValue.
nodeValue一般只用来设置 文本节点的值。如果要刷新属性节点的值,一般使用setAttribute().

当前1/2页 12下一页阅读全文

(0)

相关推荐

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

  • js遍历子节点子元素附属性及方法

    复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

  • JavaScript 用cloneNode方法克隆节点的代码

    很多时候我们会用for 来生成多个结构相同的节点结构,这样我们需要写很多createElement.setAttribute.appendChild 等代码. 但其实我们只需要有一个html 的模板,就可以用cloneNode 方法对已有的节点进行克隆,包括其子节点. 以下是cloneNode 方法原型: newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只

  • JavaScript 节点操作 以及DOMDocument属性和方法

    属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

  • JS获取父节点方法

    如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):        1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点.             如今,已

  • Javascript removeChild()删除节点及删除子节点的方法

    下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo" 的节

  • javascript获取dom的下一个节点方法

    利用javascript 写一个在页面点击加减按钮实现数字的累加. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" value="+" onclick="jia(this)" /> <label class="num">0</label> <input type="button" value="-"

  • JavaScript实现body内任意节点的自定义属性功能示例

    本文实例讲述了JavaScript实现body内任意节点的自定义属性功能.分享给大家供大家参考,具体如下: 在HTML中body内的任意节点是可以自定义属性的,当然不包括body, 比如以下的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • js查找父节点的简单方法

    <div>         <a href="#">标题</a>         <ul id="demo">             <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                 <ul>             

  • JS获取节点的兄弟,父级,子级元素的方法

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 代码如下: <div id="test"><div></div><div></div></div> 原生的JS获取ID为test的元素下的子元素.可以用: var a = docuemnt.getElementByI

随机推荐