xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 深入理解DOM节点类型第五篇,Element节点类型详解

深入理解DOM节点类型第五篇,Element节点类型详解

发布时间:2019-04-27 20:47编辑:计算机尝试浏览(91)

    DOM Element节点类型详解

    2015/09/21 · HTML5 · DOM

    正文笔者: 伯乐在线 - 韩子迟 。未经小编许可,禁止转发!
    接待参预伯乐在线 专辑撰稿人。

    上文中我们上课了 DOM 中最根本的节点类型之1的 Document 节点类型,本文大家三番五次深入,谈谈另三个重要的节点类型 Element 。

    前面包车型大巴话

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

     

    Element类型用于表现XML或HTML成分,提供了对成分标签字、子节点及特色的拜会。

    Element目的对应网页的HTML标签成分。每1个HTML标签元素,在DOM树上都会转化成二个Element节点目标(以下简称成分节点)。

    1、概况


    Element 类型用于表现 HTML 或 XML 成分,提供了对成分标签字、子节点及特色的走访。 Element 节点有所以下特征:

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

    要拜访成分的标具名,能够用 nodeName 属性,也得以用 tagName 属性;那多少个属性会重临同样的值。在 HTML 中,标签字始终都是1切大写表示,而在 XML(有时候也包括XHTML)中,标具名始终和源代码中保持1致。倘诺你不分明自身的台本将会在 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分别是一、成分的大写标具名和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>
    

     

    Element节点特征

    • nodeType的值是1;
    • nodeName的值为因素的价签字;
    • 深入理解DOM节点类型第五篇,Element节点类型详解。nodeValue的值为null;
    • parentNode的值大概是Document或Element;
    • ownerDocument的值为null;
    • 其子节点或然是Element、Text、Comment、ProcessingInstruction、CDataSection或EntityReference。

    在HTML中,标签字始终都是全数大写表示;而在XML中,标具名则始终会与源代码中的保持1致。所以最棒在比较前边将标签字调换为同1的大小写形式:

    if(element.tagName == 'div'){ //不能这样比较,很容易出错!
    }
    
    if(element.tagName.toLowerCase() == 'div'){ //这样最好(适用于任何文档)
    }
    

    要初秋点的nodeType个性都以一,然而不相同HTML标签生成的要季秋点时差异等的。JS内部采纳区别的构造函数,生成差异的Element节点,比如<a>标签的节点目的由HTMLAnchorElement()构造函数生成,<button>标签的节点目的由HTMLButtonElement()构造函数生成。因而,成分节点不是一种对象,而是壹组对象。

    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>
    

     

    HTML元素

    1、与成分本人特征相关的性质


    以下属性与成分自个儿的性状相关。

    三、天性的获取和安装


    各样成分都有贰个或伍本性状,这个特点的用处是提交相应成分或其内容的附加新闻。操作天性的 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()四个,能够针对其余本性应用,包涵那3个以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那壹叁个性格未有其他意义

    <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>
    

     

    特性(属性)

    每种成分都有壹或多个天性,用于给出相应成分或内容的附加消息。
    例如:

    • id,成分在文书档案中的唯壹标记符
    • title,有关因素的增大表明消息,一般经过工具提醒条显示出来
    • lang,成分内容的语言代码,很少使用
    • dir,语言的趋势,很少使用
    • className,与成分的class性情对应,即为成分钦定的CSS类。未有将以此特性命名称为class,是因为class是 ECMAScript 的保留字。

    上述本性都足以用来博取或涂改相应的性状值。

    <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
    
    <script type="application/javascript">
        var div = document.getElementById("myDiv");
    
        //获取元素中指定的所有信息
        alert(div.id);
        alert(div.className);
        alert(div.title);
        alert(div.lang);
        alert(div.dir);
    
        //也可以修改对应的每个特性:
        div.id = "someOtherId";
        div.className = "ft";
        div.title = "some other text";
        div.lang = "fr";
        div.dir = "rtl";
    </script>
    

    操作特性的DOM方法:getAttribute()、setAttribute()、removeAttribute()。

    1.1、Element.attributes

    Element.attributes个性重临二个像样数组的目标,成员是现阶段因三秋点的有所属性节点。下壹节将详细介绍。

    4、attributes 属性


    Element 类型是运用 attributes 属性的唯一一个 DOM 节点类型。 attributes 属性中包括四个 NamedNodeMap,与 NodeList 类似,也是2个“动态”的会面。成分的每贰个性格都由1个 Attr 节点表示,种种节点都保存在 NamedNodeMap 对象中。NamedNodeMap 对象具备下列方法:

    1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
    2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
    3. setNamedItem(node): 向列表中增多节点,以节点的 nodeName 属性为索引
    4. item(pos): 重回位于数字 pos 地点处的节点

    attributes 属性中含有一名目大多的节点,每种节点的 nodeName 就是特色的称谓,而节点的 nodeValue 正是特点的值。

    JavaScript

    // 获得成分的风味值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能完结平等成效var id = element.getAttribute('id'); // 与removeAttribute() 方法比较,唯1的分别是能回去表示被去除天性的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 加多新特色 // 须求传入②天性格节点 element.attributes.setNamedItem(newAttr);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 取得元素的特性值
    var id = element.attributes.getNamedItem('id').nodeValue;
    var id = element.attributes['id'].nodeValue;
     
    // getAttribute() 也能实现一样功能
    var id = element.getAttribute('id');
     
    // 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
    var oldAttr = element.attributes.removeNamedItem('id');
     
    // 添加新特性
    // 需要传入一个特性节点
    element.attributes.setNamedItem(newAttr);

    貌似的话,由于后面介绍的 attributes 方法不够便利,因而开采职员越来越多的会选用 getAttribute() removeAttribute() 以及setAttribute() 方法。

    但是假设想要遍历成分的本性,attributes 属性倒是能够派上用场:

    <div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i ) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id='myDiv' title='hanzichi' class='fish'> </div>
    <script>
      var myDiv = document.querySelector('div');
      for (var i = 0, len = myDiv.attributes.length; i < len; i ) {
        var attrName = myDiv.attributes[i].nodeName
          , attrValue = myDiv.attributes[i].nodeValue;
     
        console.log(attrName, attrValue);
      }
     
      // id myDiv
      // title hanzichi
      // class fish
    </script>

    attributes属性

      成分节点Element是唯1一个选择attributes属性的DOM节点类型。attributes属性中隐含三个NamedNodeMap,与NodeList类似,也是七个动态的聚合。成分的每三个特色都由1个Attr节点表示,各类节点都保存在NamedNodeMap对象中,每一种节点的nodeName便是特色的称谓,节点的nodeValue就是特点的值

      attributes属性包罗以下八个艺术

    getNamedItem(name)

      getNamedItem(name)方法再次来到nodeName属性等于name的节点

    <div class="box" id="box" name="abc" index="123" title="test"></div>
    <script>
    var oBox = document.getElementById('box');
    console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
    console.log(oBox.attributes.getNamedItem("index"));//index='123'
    console.log(oBox.attributes.getNamedItem("index").nodeName);//'index'
    console.log(oBox.attributes.getNamedItem("index").nodeValue);//'123'
    console.log(oBox.attributes.index);//index='123'
    </script>
    

    removeNamedItem(name)

      removeNamedItem(name)方法从列表中移除nodeName属性等于name的节点,并重临该节点

    <div class="box" id="box" name="abc" index="123" title="test"></div>
    <script>
    var oBox = document.getElementById('box');
    console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
    console.log(oBox.attributes.getNamedItem("index"));//index='123'
    console.log(oBox.attributes.removeNamedItem("index"));//index='123'
    console.log(oBox.attributes.getNamedItem("index"));//null
    </script>
    

    setNamedItem(node)

      setNamedItem(node)方法向列表中增多节点,该措施无重返值

    <div class="box" id="box" name="abc" index="123" title="test"></div>
    <script>
    var oBox = document.getElementById('box');
    console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
    var oldItem = oBox.attributes.removeNamedItem("index");
    console.log(oBox.attributes.getNamedItem("index"));//null
    console.log(oldItem);//index='123'
    console.log(oBox.attributes.setNamedItem(oldItem));//null
    console.log(oBox.attributes.getNamedItem("index"));//index='123'
    </script>
    

    item(pos)

      item(pos)方法重回位于数字pos地方处的节点,也足以用方括号法[]简写

    <div class="box" id="box" name="abc" index="123" title="test"></div>
    <script>
    var oBox = document.getElementById('box');
    console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
    console.log(oBox.attributes.item(2));//name="abc"
    console.log(oBox.attributes[2]);//name="abc"
    </script>
    

    遍历

      attributes属性首要用以天性遍历。在需求将DOM结构体系化为HTML字符串时,多数都会提到遍历成分性情

    function outputAttributes(element){
        var pairs = new Array(),attrName,attrValue,i,len;
        for(i = 0,len=element.attributes.length;i<len;i  ){
            attrName = element.attributes[i].nodeName;
            attrValue = element.attributes[i].nodeValue;
            pairs.push(attrName  "=""   attrValue   """);
        }
        return pairs.join(" ");
    }
    

      针对attributes对象中的性情,分化浏览器重临的逐条不一样

    <div class="box" id="box" name="abc" index="123" title="test"></div>
    <script>
    function outputAttributes(element){
        var pairs = new Array(),attrName,attrValue,i,len;
        for(i = 0,len=element.attributes.length;i<len;i  ){
            attrName = element.attributes[i].nodeName;
            attrValue = element.attributes[i].nodeValue;
            pairs.push(attrName  "=""   attrValue   """);
        }
        return pairs.join(" ");
    }
    //(chromesafari)class="box" id="box" name="abc" index="123" title="test"
    //(firefox)title="test" index="123" name="abc" id="box" class="box"
    //(IE8 )title="test" class="box" id="box" index="123" name="abc"
    //(IE7-)输出所有的特性
    console.log(outputAttributes(document.getElementById("box")))
    </script>
    

      由地点结果来看,IE7-浏览器会回到HTML成分中具有大概的性状,包含没有点名的特征

    specified

      能够利用特色节点的specified属性来减轻IE7-浏览器的这几个主题材料。假若specified属性的值为true,则意味该属性棉被服装置过。在IE中,全体未安装过的个性的该属性值都以false。而在别的浏览器中,任何特性节点的specified值始终为true

    <div id="box" name="abc" index="123" title="test"></div>
    <script>
    var oBox = document.getElementById('box');
    var yesItem = oBox.attributes.getNamedItem("index");
    var noItem = oBox.attributes.getNamedItem("onclick");
    //所有浏览器浏览器都返回true
    console.log(yesItem.specified);
    //IE7-浏览器返回false,而其他浏览器报错,noItem不存在
    console.log(noItem.specified);
    </script>
    
    <div class="box" id="box" name="abc" index="123" title="test"></div>
    <script>
    function outputAttributes(element){
        var pairs = new Array(),attrName,attrValue,i,len;
        for(i = 0,len=element.attributes.length;i<len;i  ){
            attrName = element.attributes[i].nodeName;
            attrValue = element.attributes[i].nodeValue;
            if(element.attributes[i].specified){
                pairs.push(attrName  "=""   attrValue   """);    
            }
        }
        return pairs.join(" ");
    }
    //所有浏览器下都返回title="test" class="box" id="box" index="123" name="abc"(顺序不一样)
    console.log(outputAttributes(document.getElementById("box")))
    </script> 
    

     

    获得脾性:getAttribute()

    如若给定的性质不设有,getAttribute()重返null。

    var div = document.getElementById("myDiv");
    console.log(div.getAttribute("id"));      //myDiv
    console.log(div.getAttribute("class"));   //bd
    console.log(div.getAttribute("title"));   //Body text
    console.log(div.getAttribute("lang"));    //en
    console.log(div.getAttribute("dir"));     //ltr
    

    小心:传递给getAttribute()的属性名与事实上的性质名要同样。

    有两类分外质量,它们即便有对应的属性名,但质量的值和经过getAttribute()重临的值并分歧。
    率先类特色:style,用于通过CSS为成分内定样式。透过getAttribute()访问时,重临的style性情值中蕴藏的是CSS文本,而通过属性来访问它则会再次来到3个目标。
    第一类特性:onclick这样的事件管理程序。当在要素上应用时,onclick本性中涵盖的时JavaScript代码,假设因此getAttribute()访问,则会再次回到相应代码的字符串,而访问onclick属性时,则会回去一个JavaScript函数(假若未在要素中内定相应天性,则赶回null)。

    由于存在那个差距,由此开荒人士不平日应用getAttribute(),而只行使对象的属性。

    1.2、Element.id,Element.tagName

    Element.id个性再次来到内定成分的id性情,该属性可读写。

    Element.tagName品质重临钦赐成分的大写标具名,与nodeName质量的值拾分。

    // HTML代码为
    // Hello
    var span = document.getElementById('span');
    span.id // "myspan"
    span.tagName // "SPAN"
    

    图片 1

    验证

    5、成分的子节点


    <ul id='myUl'> <li> Item 一 </li> <li> Item 2</li> <li> Item 三 </li> </ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // IE: 三 别的浏览器: 7</script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <ul id='myUl'>
      <li> Item 1 </li>
      <li> Item 2 </li>
      <li> Item 3 </li>
    </ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // IE: 3   其他浏览器: 7
    </script>

    以上代码,假诺是 IE 来分析,那么 <ul> 成分会有 3 个子节点,分别是 三个 <li> 成分;而一旦是其他浏览器解析,则会有 7 个子节点,包涵 3个 <li> 元素 和 肆 个公文节点。

    要是像上面那样将元素之间的空白符删除,那么具备浏览器都会回去相同数量的子节点:

    <ul id='myUl'><li> Item 一 </li><li> Item 2</li><li> Item 3 </li></ul> <script> var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); // 全部浏览器: 叁 </script>

    1
    2
    3
    4
    5
    6
    <ul id='myUl'><li> Item 1 </li><li> Item 2 </li><li> Item 3 </li></ul>
     
    <script>
      var myUl = document.getElementById('myUl');
      console.log(myUl.childNodes.length); // 所有浏览器: 3
    </script>

     

    打赏帮忙作者写出愈来愈多好作品,多谢!

    打赏作者

    最后

      若是从头到尾看完那篇博文,会发觉全篇篇幅最多的内容是特点的装置。性情设置不是应有在特色节点上呢?天性节点可以安装,但是使用要素商点来操作性子更利于。成分节点的始末还包罗元素商点的操作,不过出于在节点操作博文中已经详细介绍过,就不再赘述

      下一篇将介绍特色节点

      接待交换

    设置特色:setAttribute()

    /*
     * setAttribute()
     * param:
     *     param1——要设置的特性名
     *     param2——要设置的值
     * 如果特性已存在则会以指定的值替换现有的值;如果特性不存在,则创建该属性并设置相应的值。
     */
     var div = document.getElementById("myDiv");
     div.setAttribute("id","someOhterId");
     div.setAttribute("class","ft");
     div.setAttribute("title","some other");
     div.setAttribute("lang","fr");
     div.setAttribute("dir","rtl");
    

    1.3、Element.innerHTML

    Element.innerHTML属性再次来到该因素包罗的HTML代码。该属性可读写,常用来设置有个别节点的始末。

    一经将该属性设为空,等于删除它包罗的有着节点。

    el.innerHTML = '';
    

    地点代码等于将el节点形成了三个空节点,el原先包括的节点被全体剔除。

    专注,假若文本节点中涵盖&、小于号和大于号,innerHTML属性会将它们转为实体方式&<>

    // HTML代码如下 <p id="para"> 5 > 3 </p>
    document.getElementById('para').innerHTML
    // 5 > 3
    

    出于地点这几个原因,导致用innerHTML插入<script>标签,不会被实施。

    var name = "<script>alert('haha')</script>";
    el.innerHTML = name;
    

    地点代码将脚本插入内容,脚本并不会实行。不过,innerHTML要么有平安风险的。

    var name = "<img src=x onerror=alert(1)>";
    el.innerHTML = name;
    

    位置代码中,alert艺术是会进行的。由此为了安全思量,假诺插入的事文本,最棒用textContent品质代替innerHTML

    打赏帮衬自身写出越多好小说,感激!

    图片 2

    1 赞 1 收藏 评论

    去除性子:removeAttribute()

    用途:通透到底剔除成分的特点。调用这些法子不仅会免去性子的值,而且也会从要素中完全除去天性。

    1.4、Element.outerHTML

    Element.outerHTML属性重临叁个字符串,内容为钦命成分节点的兼具HTML代码,包含它本人和包蕴的具有子成分。

    // HTML代码如下
    // <div id="d"><p>Hello</p></div>
    
    d = document.getElementById('d');
    d.outerHTML
    // '<div id="d"><p>Hello</p></div>'
    

    outerHTML属性是可读写的,对它举办赋值,等于替换掉当前成分。

    // HTML代码如下
    // <div id="container"><div id="d">Hello</div></div>
    
    container = document.getElementById('container');
    d = document.getElementById("d");
    container.firstChild.nodeName // "DIV"
    d.nodeName // "DIV"
    
    d.outerHTML = '<p>Hello</p>';
    container.firstChild.nodeName // "P"
    d.nodeName // "DIV"
    

    地点代码中,outerHTML品质重新赋值今后,内层的div成分就不设有了,被p成分替换了。然而,变量d依然指向原来的div元素,这表示被沟通的DIV成分还设有于内部存款和储蓄器中。

    至于我:韩子迟

    图片 3

    a JavaScript beginner 个人主页 · 小编的稿子 · 9 ·    

    图片 4

    attributes属性

    Element类型是利用attribute属性的唯一一个DOM节点类型。
    attribute属性中隐含一个NamedNodeMap,与NodeList类似,也是三个“动态”的集聚。元素的每三个风味都有一个Attr节点表示,每一个节点都保存在NamedNodeMap对象中。

    1.5、Element.className,Element.classList

    className属性用来读写当前因首秋点的class属性。它的值是三个字符串,每一种class时期用空格分割。

    classList属性则赶回3个近似数组的靶子,当前成分节点的种种class正是其一目标的一个成员。

    <div class="one two three" id="myDiv"></div>
    

    下边这些div成分节点目标的className属性和classList属性,分别如下。

    document.getElementById('myDiv').className
    // "one two three"
    
    document.getElementById('myDiv').classList
    // {
    //   0: "one"
    //   1: "two"
    //   2: "three"
    //   length: 3
    // }
    

    从上边代码能够看到,className品质再次来到三个空格分隔的字符串,而classList属性指向一个看似数组的靶子,该对象的length特性(只读)再次回到当前因素的class数量。

    classList对象有下列方式。

    add():扩大三个class。
    remove():移除三个class。
    contains():检查当前因素是或不是包蕴某些class。
    toggle():将某些class移入或移出当前因素。
    item():重返钦定索引地点的class。

    toString():将class的列表转为字符串。

    myDiv.classList.add('myCssClass');
    myDiv.classList.add('foo', 'bar');
    myDiv.classList.remove('myCssClass');
    myDiv.classList.toggle('myCssClass'); // 如果myCssClass不存在就加入,否则移除
    myDiv.classList.contains('myCssClass'); // 返回 true 或者 false
    myDiv.classList.item(0); // 返回第一个Class
    myDiv.classList.toString();
    

    上面比较一下,className和classList在加上和删除有个别类时的写法。

    // 添加class
    document.getElementById('foo').className  = 'bold';
    document.getElementById('foo').classList.add('bold');
    
    // 删除class
    document.getElementById('foo').classList.remove('bold');
    document.getElementById('foo').className =
      document.getElementById('foo').className.replace(/^bold$/, '');
    

    toggle方式基本上能用一个布尔值,作为第三个参数。如若为true,则增多该属性;固然为false,则去除该属性。

    el.classList.toggle('abc', boolValue);
    
    // 等同于
    
    if (boolValue){
      el.classList.add('abc');
    } else {
      el.classList.remove('abc');
    }
    

    NamedNodeMap对象方法

    • getNamedItem(name):再次回到nodeName属性等于name的节点;
    • removeNamedItem(name):从列表中移除nodeName属性等于name的节点;
    • setNameItem(node):向列表中增添节点,以节点的nodeName属性为索引;
    • item(pos):重临位于数字pos地点处的节点

    attributes属性中包蕴一名目繁多节点,每一种节点的nodeName正是特色的名号,而节点的nodeValue就是特点的值。

    var element = document.getElementById("myDiv");
    
    //取得元素id的特性
    var id = element.attributes.getNamedItem("id").nodeValue;
    var id = element.attributes["id"].nodeValue;
    
    //设置特性的值
    element.attributes["id"].nodeValue = "someOtherId";
    
    //直接删除具有给定名称的特性,返回表示被删除特性的Attr节点。
    var oldAttr = element.removeAttribute("id");
    var oldAttr = element.attributes.removeNamedItem("id");
    
    //为元素添加一个新特性,要传入一个特性节点(不常用)
    element.attributes.setNamedItem(newAttr);
    

    attributes的章程不够方便,由此开拓人士越来越多的会使用getAttribute(),setAttribute()和removeAttribute()。

    2、盒状模型相关属性


    遍历成分的表征

    function outputAttributes(element){
        var pairs = new Array(),
            attrName,
            attrValue,
            i,
            len;
        for(i=0,len=element.attributes.length;i<len;i  ){
            attrName = element.attributes[i].nodeName;
            attrValue = element.attributes[i].nodeValue;
            //IE7及更早的版本会返回HTML元素中所有可能的特性,包括没有指定的特性。
            //因此要加个判断:
            //   specified——true:在HTML中制定了相应特性或通过setAttribute()方法设置了特性。false——未设置特性。
            if(element.attributes[i].specified){
                pairs.push(attrName "="" attrValue """);
            }
        }
        return pairs.join(" ");
    }
    

    2.1、Element.clientHeight,Element.clientWidth

    Element.clientHeight属性再次回到成分节点可知部分的万丈,Element.clientWidth质量重临成分节点可知部分的增长幅度。所谓可知部分,指的是不包蕴溢出的尺寸,只回去该因素在容器中据为己有的深浅,对于有滚动条的因素来说,它们也正是滚动条围起来的区域大小。那多个性情的值包涵Padding、但不包涵滚动条、边框和Margin,单位为像素。那两性情子能够总结得到,等于成分的CSS中度(或宽度)加上CSS的padding,减去滚动条(若是存在)。

    对于整张网页来讲,当前可知高度(即视口中度)要从document.documentElement对象(即<html>节点)上获取,等同于window.innerHeight属性减去等级次序滚动条的惊人。未有滚动条时,那多少个值是非常的;有滚动条时,前者小于后者。

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:深入理解DOM节点类型第五篇,Element节点类型详解

    关键词: HTML5 javascript总结 JavaScrip

上一篇:前端调试利器,10分钟学会前端调试利器

下一篇:没有了