元素节点

　　元素节点就是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  # dom  # 文本节点  # JavaScript DOM节点操作方法总结  # js操作DOM--添加、删除节点的简单实例  # JavaScript中对DOM节点的访问、创建、修改、删除  # javascript获取dom的下一个节点方法  # javascript 获取HTML DOM父、子、临近节点  # js和jquery对dom节点的操作(创建/追加)  # js中使用DOM复制（克隆）指定节点名数据到新的XML文件中的代码  # javascript dom操作之cloneNode文本节点克隆使用技巧  # 就可以  # 返回值  # 都是  # 的是  # 报错  # 第一个  # 遍历  # 不存在  # 作为一个  # 不支持  # 要先  # 不要用  # 小编  # 其父  # 操作方法  # 是一个  # 彻底删除  # 是在  # 行间  # 最多 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  如何确保西部建站助手FTP传输的安全性？  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  Laravel如何为API生成Swagger或OpenAPI文档  Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】  UC浏览器如何设置启动页 UC浏览器启动页设置方法  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  北京企业网站设计制作公司,北京铁路集团官方网站？  北京的网站制作公司有哪些,哪个视频网站最好？  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Laravel如何使用Blade组件和插槽？（Component代码示例）  如何为不同团队 ID 动态生成多个“认领值班”按钮  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  java ZXing生成二维码及条码实例分享  如何在IIS管理器中快速创建并配置网站？  Laravel如何使用Livewire构建动态组件？（入门代码）  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  WEB开发之注册页面验证码倒计时代码的实现  JS经典正则表达式笔试题汇总  phpredis提高消息队列的实时性方法(推荐)  如何在云主机快速搭建网站站点？  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  如何在 Pandas 中基于一列条件计算另一列的分组均值  Laravel怎么为数据库表字段添加索引以优化查询  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  Laravel怎么调用外部API_Laravel Http Client客户端使用  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  Laravel怎么在Blade中安全地输出原始HTML内容  如何在IIS中新建站点并解决端口绑定冲突？  Laravel如何使用Blade模板引擎？（完整语法和示例）  动图在线制作网站有哪些,滑动动图图集怎么做？  三星网站视频制作教程下载,三星w23网页如何全屏？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  QQ浏览器网页版登录入口 个人中心在线进入  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  Java遍历集合的三种方式  Laravel如何使用Sanctum进行API认证？（SPA实战）  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  如何在不使用负向后查找的情况下匹配特定条件前的换行符  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  如何快速生成专业多端适配建站电话？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  香港服务器如何优化才能显著提升网站加载速度？  Laravel如何使用Collections进行数据处理？（实用方法示例）  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】