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 最简单的属性菜单
Oct 08 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
Vue的生命周期操作示例
Sep 17 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python开发之str.format()用法实例分析
2016/02/22 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python创建n行m列数组示例
2019/12/02 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
个人年终总结结尾
2015/03/06 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python