彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > DOM Element节点类型详解

DOM Element节点类型详解

发布时间:2019-10-11 14:08编辑:新闻动态浏览(73)

    DOM Element节点类型详解

    2015/09/21 · HTML5 · DOM

    本文作者: 伯乐在线 - 韩子迟 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element 。

    前面的话

      元素节点Element非常常用,是DOM文档树的主要节点;元素节点是HTML标签元素的DOM化结果。元素节点主要提供了对元素标签名、子节点及特性的访问,本文将详细介绍元素节点的主要内容

     

    1、概况


    Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征:

    1. nodeType 的值为 1
    2. nodeName 的值为元素的标签名
    3. nodeValue 的值为null
    4. parentNode 可能是 Document 或者 Element
    5. 其子节点可能是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

    要访问元素的标签名,可以用 nodeName 属性,也可以用 tagName 属性;这两个属性会返回相同的值。在 HTML 中,标签名始终都以全部大写表示,而在 XML(有时候也包括 XHTML)中,标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行,最好还是在比较之前将标签名转换成相同的大小写形式:

    JavaScript

    var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档 // ... }

    1
    2
    3
    4
    5
    6
    7
    var myDiv = document.querySelector('div');
    console.log(myDiv.tagName);  // DIV
    console.log(myDiv.nodeName);  // DIV
     
    if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
      // ...
    }

    特征

      元素节点的三个node属性——nodeType、nodeName、nodeValue分别是1、元素的大写标签名和null,其父节点parentNode指向包含该元素节点的元素节点Element或文档节点Document

      [注意]要访问元素的标签名可以使用nodeName,也可以使用tagName属性,这两个属性会返回相同的值

    <div id="test">123</div>
    <script>
    console.log(test.nodeType);//1
    console.log(test.nodeName);//'DIV'
    console.log(test.nodeValue);//null
    console.log(test.parentNode);//<body>
    console.log(test.childNodes);//[text]
    console.log(test.tagName,test.tagName === test.nodeName);//'DIV' true
    </script>
    

     

    2、HTML 元素


    所有 HTML 元素都由 HTMLElement 类型表示,不是直接通过这个类型,也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性:

    1. id 元素在文档中的唯一标识符
    2. title 有关元素的附加说明信息,一般通过工具提示条显示出来
    3. lang 元素内容的语言代码,很少使用
    4. dir 语言的方向,值为 ltr 或者 rtl,也很少使用
    5. className 与元素的 class 特性对应

    子节点

      元素可以有任意数目的子节点和后代节点,因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点,这些子节点可能是元素、文本、注释、处理指令节点

    <ul class="list" id="list">
        <li class="in"></li>
        <li class="in"></li>
    </ul>
    <script>
    var oList = document.getElementById('list');
    //IE8-浏览器返回2,其他浏览器返回5。因为IE8-浏览器子节点中不包含空白文本节点
    //关于空白文本节点的详细内容移步至此
    console.log(oList.childNodes.length)
    </script>
    

    兼容

      可以通过检查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   
    </script>
    

     

    3、特性的获取和设置


    每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是getAttribute() setAttribute() removeAttribute()

    注意,传递给 getAttribute() 的特性名与实际的特性名相同,因此要想得到 class 特性值,应该传入 class 而不是 className,后者只有在通过对象属性(property)访问特性时才用。如果给定名称的特性不存在,getAttribute() 返回 null。

    <div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id='myDiv' title='hanzichi'> </div>
    <script>
      var myDiv = document.querySelector('div');
     
      // attribute
      console.log(myDiv.getAttribute('id')); // myDiv
      console.log(myDiv.getAttribute('class')); // null
      console.log(myDiv.getAttribute('title')); // hanzichi
      console.log(myDiv.getAttribute('lang')); // null
      console.log(myDiv.getAttribute('dir')); // null
     
      // property
      console.log(myDiv.id); // myDiv
      console.log(myDiv.className); // ''
      console.log(myDiv.title); // hanzichi
      console.log(myDiv.lang); // ''
      console.log(myDiv.dir); // ''
    </script>

    通过 getAttribute() 方法也可以取得自定义特性。

    在实际开发中,开发人员不常用 getAttribute(),而是只使用对象的属性(property)。只有在取得自定义特性值的情况下,才使用getAttribute() 方法。为什么呢?比如说 style,在通过 getAttribute() 访问时,返回的 style 特性值包含的是 css 文本,而通过属性来访问会返回一个对象。再比如 onclick 这样的事件处理程序,当在元素上使用时,onclick 特性包含的是 Javascript 代码,如果通过 getAttribute() 访问,将会返回相应代码的字符串,而在访问 onclick 属性时,则会返回 Javascript 函数。

    与 getAttribute() 对应的是 setAttribute(),这个方法接受两个参数:要设置的特性名和值。如果特性已经存在,setAttribute()会以指定的值替换现有的值;如果特性不存在,setAttribute() 则创建该属性并设置相应的值。

    而 removeAttitude() 方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。

    JavaScript

    div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

    1
    2
    3
    4
    div.setAttribute('id', 'someOtherId');
    div.setAttribute('title', 'some other text');
     
    div.removeAttribute('class')

    特性操作

      每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个,可以针对任何特性使用,包括那些以HTMLElement类型属性的形式定义的特性

    hasAttribute()

      hasAttribute()方法返回一个布尔值,表示当前元素节点是否包含指定属性

      [注意]IE7-浏览器不支持hasAttribute()方法

    <div id="test" class="class1"></div>
    <script>
    console.log(test.hasAttribute('class'));//true
    console.log(test.hasAttribute('title'));//false
    </script>
    

    getAttribute()

      getAttribute()方法用于取得特性的值,如果给定名称的特性不存在或无参数则返回null

    <div id="test" class="class1"></div>
    <script>
    console.log(test.getAttribute('class'));//'class1'
    console.log(test.getAttribute('title'));//null
    console.log(test.getAttribute('b'));//null
    console.log(test.getAttribute(''));//null
    </script>
    

      [注意]元素特性和对象属性并不相同,二者的区别详细情况移步至此

    setAttribute()

      setAttribute()方法接受两个参数:要设置的特性名和值,如果已经存在,则替换现有的值。如果特性不存在,setAttribute()则创建该属性并设置相应的值。该方法无返回值

    <div id="box">123</div>
    <script>
    var oBox = document.getElementById('box');
    oBox.setAttribute("id","test");
    //注意获取oBox.id时并不会报错,因为oBox保存的是当时id为box的对象,也就是现在id为test的对象
    console.log(oBox.id);//test
    </script>
    

      [注意]通过setAttrbute()方法设置的特性名会统一转换成小写形式

    <div id="box">123</div>
    <script>
    var oBox = document.getElementById('box');
    oBox.setAttribute("ABC","test");
    console.log(oBox.getAttribute("ABC"));//test
    console.log(oBox.getAttribute("abc"));//test
    </script>
    

    bug

      IE7-浏览器设置class、style、for、cellspacing、cellpadding、tabindex、readonly、maxlength、rowspan、colspan、usemap、frameborder、contenteditable这13个特性没有任何效果

    <style>
    .testClass{
        font-size: 30px;
    }
    </style>    
    
    <div id="box">123</div>
    <script>
    //IE7-浏览器下没有任何效果,其他浏览器出现红色背景及30px的文字大小
    var oBox = document.getElementById('box');
    oBox.setAttribute("class","testClass");
    oBox.setAttribute("style","height: 100px; background: red;")
    </script>     
    

      可以利用IE7-浏览器下对象属性和元素特性的混淆bug来设置

    <style>
    .testClass{
        font-size: 30px;
    }
    </style>    
    
    <div id="box">123</div>
    <script>
    var oBox = document.getElementById('box');
    oBox.setAttribute("class","testClass");
    oBox.setAttribute("style","height: 100px; background: red;");
    //IE7下oBox.className的值为undefined
    if(!oBox.className){
        oBox.setAttribute("className","testClass");
        oBox.style.setAttribute("cssText","height: 100px; background: red;");
    }
    </script> 
    

    removeAttribute()

      removeAttribute()方法用于彻底删除元素的特性,这个方法不仅会彻底删除元素的特性值,还会删除元素特性。该方法无返回值

    <div class="box" id="box"></div>
    <script>
    var oBox = document.getElementById('box');
    console.log(oBox.getAttribute("id"));//box
    console.log(oBox.removeAttribute("id"));//undefined
    console.log(oBox.getAttribute("id"));//null    
    </script>
    

     

    本文由彩世界平台发布于新闻动态,转载请注明出处:DOM Element节点类型详解

    关键词:

上一篇:彩世界平台杂谈:HTML 5页面可视性API

下一篇:没有了