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


Posted in Javascript onApril 18, 2017

元素节点

元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;

元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nodeValue:null;

其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document;

元素的 childNodes 属性中包含了它的所有子节点,这些子节点可能是元素、文本、注释、处理指令节点;

childNodes 结合 NodeType 可以检查有几个元素子节点:

<ul class="list" id="list">
      <li class="in"></li>
      <li class="in"></li>
    </ul>
    <script>
      var oList = document.getElementById('list');
      var children = oList.childNodes;
      var num = 0;
      for(var i = 0; i < children.length; i++){
        if(children[i].nodeType == 1){
          num++;
        }
      }
      console.log(num);//2  有2个元素子节点  
    </script>

操作属性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个,可以针对任何属性使用,包括那些以HTMLElement类型属性的形式定义的属性;

  • obj.hasAttribute(attr)方法返回一个布尔值,表示当前元素节点是否包含指定属性;
  • IE6/IE7不支持 hasAttribute() 方法;
  • obj.hasAttribute(attr)检测 class 属性时,直接用 class 就可以了,不要用className;
  • obj.hasAttribute(attr)检测 for属性时,直接用 for就可以了,不要用htmlFor;
<div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //IE6/IE7不支持hasAttribute方法
      console.log(oTest.hasAttribute('class'));//true
      console.log(oTest.hasAttribute('className'));//false  
      console.log(oTest.hasAttribute('id'));//true
      console.log(oTest.hasAttribute('style'));//true
      console.log(oTest.hasAttribute('for'));//true
      console.log(oTest.hasAttribute('htmlFor'));//false
    </script>
  • obj.getAttribute(attr)方法用于取得属性的值,如果给定名称的属性不存在或无参数则返回null;
  • obj.getAttribute(attr)获取 class 时,直接用 class 就可以了;IE6/IE7除外,IE6/IE7的 getAttribute(attr) 方法要用 className;
  • obj.getAttribute(attr)获取 for时,直接用 for就可以了;
  • obj.setAttribute(attr,value)方法接受两个参数:要设置的属性名和值,如果已经存在,则替换现有的值。如果属性不存在,则创建该属性并设置相应的值。该方法无返回值;
  • obj.setAttribute(attr,value)设置 class 时,直接用 class 就可以了;
  • obj.setAttribute(attr,value)设置 for 时,直接用 for 就可以了;
  • obj.setAttribute(attr,value)设置 style 时,直接用 style 就可以了;在 IE7及以下,用 obj.style.setAttribute("cssText",value);  这里的 style 只是行间样式;
  • 我们一般用 obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 来获取元素当前样式;
<script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了
      oTest.setAttribute('className','bbb');
      console.log(oTest.class);//undefined IE8及以下会报错缺少标识符
      console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了
      console.log(oTest.className);//aaa
      console.log(oTest.getAttribute('className'));//bbb
      oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了
      console.log(oTest.style);//所有的style设置,包括你没有设置的,太多了,肯定不是你想要的
      console.log(oTest.getAttribute('style'));
      //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了
      oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了
      oTest.setAttribute('htmlFor','fff')
      console.log(oTest.for);//undefined  IE8及以下会报错缺少标识符
      console.log(oTest.htmlFor);//undefined
      console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了
      console.log(oTest.getAttribute('htmlFor'));//fff
      console.log(oTest);
      //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
    </script>
  • obj.removeAttribute(attr)方法用于彻底删除元素的属性,这个方法不仅会彻底删除元素的属性值,还会删除元素属性。该方法无返回值;
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      oTest.removeAttribute('class'); //removeAttribute直接用class就可以了
      oTest.removeAttribute('for');
      oTest.removeAttribute('style'); 
      console.log(oTest);// <div id="test">123</div>
    </script>

属性节点

属性节点,有的叫特性节点,差不多一个意思;

属性节点的三个node属性,nodeType:2、nodeName/name:属性名称、nodeValue/value:属性值;

属性节点还有一个 specified 属性,specified 是一个布尔值,用以区别特性是在代码中指定的,还是默认的。这个属性的值如果为true,则意味着在HTML中指定了相应特性,或者是通过 setAttribute() 方法设置了该属性。在IE中,所有未设置过的特性的该属性值都为false,而在其他浏览器中,所有设置过的特性的该属性值都是true,未设置过的特性,如果强行为其设置 specified 属性,则报错。

元素节点有一个 attributes 属性,它包含一个 NamedNodeMap,包含当前元素所有的属性及属性值,与NodeList类似,也是一个动态的集合。元素的每一个属性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中,每个节点的 nodeName 就是属性的名称,节点的 nodeValue 就是属性的值;

createAttribute(attr) 创建新的属性节点;

attributes属性包含以下四个方法:

  1. obj.attributes.setNamedItem(attr);  向列表中添加节点,该方法无返回值;要先创建属性,在以nodeValue的形式赋属性值,在传入setNamedItem
  2. obj.attributes.getNamedItem(attr);  返回 nodeName 属性等于 attr 的节点;以" attr=value " 形式返回;
  3. obj.attributes.removeNamedItem(attr); 从列表中移除 nodeName 属性等于 attr 的节点,并返回该节点;
  4. obj.attributes.item(index); 返回位于下标 index 位置处的节点,也可以用[]代替, obj.attributes[index];
<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(oTest.attributes.item(1).specified);//true
      console.log(oTest.attributes.getNamedItem('id'));//id='test'
      console.log(typeof oTest.attributes.getNamedItem('id'));//object
      console.log(oTest.attributes.removeNamedItem('for'));//id='test'
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3}
      var abc = document.createAttribute("abc"); 
      abc.nodeValue = "1234567";
      oTest.attributes.setNamedItem(abc);
      //obj.attributes.setNamedItem(attr) 要先创建属性,在以nodeValue的形式赋属性值,在传入setNamedItem
      console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4}
      console.log(oTest.attributes.item(1));//id='test'
      console.log(oTest.attributes[1]);//id='test'
    </script>

attributes属性主要用于属性遍历。在需要将DOM结构序列化为HTML字符串时,多数都会涉及遍历元素特性

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      function outputAttributes(obj){
        var arr = [],
          attrName,
          attrValue,
          i;
        for(i = 0; i < obj.attributes.length; i++){
          attrName = obj.attributes[i].nodeName;
          attrValue = obj.attributes[i].nodeValue;
          arr.push(attrName + '=\"' + attrValue + '\"');
        }
        return arr.join(" ");
      }
      var oTest = document.getElementById('test');
      console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(typeof oTest.attributes);//object
      console.log(outputAttributes(oTest));
      //class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;"
      console.log(typeof outputAttributes(oTest));//string
    </script>

文本节点

文本节点的三个node属性,nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本,其父节点 parentNode 指向包含该文本节点的元素节点,文本节点没有子节点;

关于文本节点,遇到最多的兼容问题是空白文本节点问题。IE8及以下浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点 ;所以有时候我们需要清理空白文本节点;

<div id="test">
      <div>hello world!</div>
    </div>
    <script type="text/javascript">
      var oTest = document.getElementById('test');
      //第一个和最后一个都是空白文本节点
      console.log(oTest.firstChild);//" "  
      console.log(oTest.lastChild);//" "  
      console.log(oTest.childNodes);//[text, div, text]  
      //标准浏览器输出[text, div, text],text表示空白文本节点
      //IE8及以下浏览器输出[div],并不包含空白文本节点
      console.log(oTest.childNodes.length); //3
      //标准浏览器返回3
      //IE8及以下浏览器返回1,并不包含空白文本节点
      //清理空白文本节点
      function cleanWhitespace(oEelement){
         for(var i = 0; i < oEelement.childNodes.length; i++){
           var node = oEelement.childNodes[i];
           if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){
             node.parentNode.removeChild(node);
           }
         }
      }
      cleanWhitespace(oTest);
      console.log(oTest.childNodes);//[div]
      console.log(oTest.childNodes.length); //1
    </script>

文本节点属性:

  • 文本节点的 data 属性与 nodeValue 属性相同;
  • wholeText 属性将当前 Text 节点与毗邻的 Text 节点,作为一个整体返回。大多数情况下,wholeText 属性的返回值,与 data 属性和 textContent 属性相同;
  • 文本节点的 length 属性保存着节点字符的数目,而且 nodeValue.length、data.length 也保存着相同的值;   
<div id="testData">hello world!</div>
    <div id="testWholeText">hello world!</div>
    <script type="text/javascript">
      var oTestData = document.getElementById('testData');
      //第一个和最后一个都是空白文本节点
      console.log(oTestData.firstChild);//"hello world!"  
      console.log(typeof oTestData.firstChild);//object  
      console.log(oTestData.childNodes.length); //1
      console.log(oTestData.firstChild.nodeValue);//"hello world!" 
      console.log(typeof oTestData.firstChild.nodeValue);//string
      console.log(oTestData.firstChild.data);//"hello world!" 
      //文本节点的data属性与nodeValue属性相同,都是 string 类型
      console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true
      var oTestWholeText = document.getElementById('testWholeText');
      console.log(oTestWholeText.childNodes); //[text]
      console.log(oTestWholeText.childNodes.length); //1
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      console.log(oTestWholeText.firstChild.data);//hello world!  
      oTestWholeText.firstChild.splitText('or');
      console.log(oTestWholeText.childNodes); //[text, text]
      console.log(oTestWholeText.childNodes.length); //2
      console.log(oTestWholeText.firstChild);//#text
      console.log(oTestWholeText.firstChild.wholeText);//hello world!
      //wholeText属性将当前Text节点与毗邻的Text节点,作为一个整体返回。
      console.log(oTestData.firstChild.length);//12
      console.log(oTestData.firstChild.nodeValue.length);//12
      console.log(oTestData.firstChild.data.length);//12
    </script>

文本节点方法:

文本节点的操作与字符串的操作方法相当类似。一般地,我们获取文本都用 innerHTML,然后再去字符串的操作方法去操作。

  • document.createTextNode(text); 方法用于创建文本节点,这个方法接收一个参数,要插入节点中的文本;插入的是文本,就算写的是标签,也是当做文本来插入的;
  • splitText(index) 方法将一个文本节点分成两个文本节点,即按照 index 指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点,包含剩下的文本;
  • appendData(text) 方法将 text 添加到节点的末尾,该方法无返回值;
  • deleteData(index,count) 方法从 index指定的位置开始删除 count 个字符,无返回值;
  • insertData(index,text) 方法在 index 指定的位置插入 text,无返回值;
  • replaceData(index,count,text) 方法用 text 替换从 index 指定位置开始到 index+count 为止的文本,无返回值;
  • substringData(index,count) 方法提取从 index 指定的位置开始到 offset+count 为止处的字符串,并返回该字符串。原来的文本节点无变化;

以上所述是小编给大家介绍的jacascript DOM节点——元素节点、属性节点、文本节点,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
vue如何进行动画的封装
Sep 26 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 #Javascript
微信小程序实战之轮播图(3)
Apr 17 #Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 #Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
You might like
php session 检测和注销
2009/03/16 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
JS跨域总结
2012/08/30 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
python中正则的使用指南
2016/12/04 Python
python中requests小技巧
2017/05/10 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
python numpy格式化打印的实例
2018/05/14 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Python运行DLL文件的方法
2020/01/17 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
防灾减灾宣传标语
2014/10/07 职场文书
2014企业年终工作总结
2014/12/23 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python