• DOM心得


     一、自定义属性值两种方法的注意事项

    1、用元素节点.属性(元素节点[属性])绑定的属性值不会出现在标签上。

    2、用get/set/removeAttribut(,)等绑定的属性会出现在标签上。且两种方式不能交换使用

    二、节点访问关系相关

    父节点  parentNode

    兄弟节点

    • nextSibling
    • nextElementSibling
    • previousSibling(前一个)
    • previousElementSibling

    子节点

    • firstChild
    • firstElementChild
    • lastChild
    • lastElementChild

    所有子节点

    • childNodes
    • children

    ***自己.parentNode.children[] 可以获取自己的兄弟节点***

    有element的是获取节点元素,没有的可以获取任意节点(空格、换行都能获取到)

    IE旧版本不支持有element的方法,一般用  ele.firstElementChild || ele.firstChild  方式获取期望的元素节点,且顺序不能调换,否则类如Chrome会获取到一个文本节点

     1 <body>
     2     <div id="box">我是一个盒子</div>
     3     <script>
     4         var ele = document.getElementById('box');//元素节点
     5         var att = ele.getAttributeNode('id');//属性节点
     6         var txt = ele.firstChild;//文本节点
     7 
     8         console.log(ele);   //-->输出 <div id="box">我是一个盒子</div>
     9         console.log(att);   //-->输出 id="box"
    10         console.log(txt);   //-->输出 "我是一个盒子"
    11 
    12         console.log(ele.nodeType);  //-->输出 1
    13         console.log(att.nodeType);  //-->输出 2
    14         console.log(txt.nodeType);  //-->输出 3
    15 
    16         console.log(ele.nodeName);  //-->输出 div
    17         console.log(att.nodeName);  //-->输出 id
    18         console.log(txt.nodeName);  //-->输出 #text
    19     </script>
    20 </body>

    nodeType值与顺序无关,元素节点是1,属性节点是2,文本节点是3

  • 相关阅读:
    C#泛型
    Chrome 中调试Javascript
    Oracle分页查询语句
    WordCount2.2
    第一周博客作业
    WordCount--统计输入文件的字符数、行数、单词数(java)--初级功能
    PHP数据库操作
    PHP安全函数
    PHP基础
    用户/目录操作
  • 原文地址:https://www.cnblogs.com/missjingjing/p/8525414.html
Copyright © 2020-2023  润新知