终于有人赞可一个特地开心，心愿大家能多点点赞要不然我都认为本人在玩单机呢

DOM（下）

  • DOM 就是咱们 html 构造中一个一个的节点形成的
  • 不光咱们的标签是一个节点，咱们写的文本内容也是一个节点，正文，包含空格都是节点

DOM节点

  • DOM 的节点咱们个别分为罕用的三大类 元素节点 / 文本节点 / 属性节点
  • 什么是分类，比方咱们在获取元素的时候，通过各种办法获取到的咱们叫做元素节点（标签节点）
  • 比方咱们标签外面写的文字，那么就是文本节点
  • 写在每一个标签上的属性，就是属性节点

元素节点

  • 咱们通过 getElementBy... 获取到的都是元素节点

属性节点

  • 咱们通过 getAttribute 获取的就是元素的属性节点

文本节点

  • 咱们通过 innerText 获取到的就是元素的文本节点

获取节点

  • childNodes：获取某一个节点下 所有的子一级节点

    <body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.childNodes)     /*        NodeList(3) [text, p, text]      0: text      1: p      2: text      length: 3      __proto__: NodeList    */  </script></body>
    • 咱们会发现，拿到当前是一个伪数组，外面有三个节点
    • 一个 text：从 <div> 始终到 <p> 两头有一个换行和一堆空格，这个是第一个节点，是一个文本节点
    • 一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
    • 一个 text：从 </p> 始终到 </div> 两头有一个换行和一堆空格，这个是第三个节点，是一个文本节点
    • 这个时候就能看到咱们有不同的节点类型了

  • children ：获取某一节点下所有的子一级 元素节点

    <body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.children)     /*        HTMLCollection [p]      0: p      length: 1      __proto__: HTMLCollection    */  </script></body>
    • 咱们发现只有一个节点了，因为 children 只有元素节点
    • div 上面又只有一个元素节点，就是 p
    • 所以就只有一个，尽管只有一个，然而也是一个 伪数组

  • firstChild：获取某一节点下子一级的 第一个节点

    <body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.firstChild) // #text   </script></body>
    • 这个是只获取一个节点，不再是伪数组了
    • 获取的是第一个
    • 第一个就是 <div> 始终到 <p> 的那个换行和空格，是个文本节点

  • lastChild：获取某一节点下子一级的 最初一个节点

    <body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.lastChild) // #text   </script></body>
    • 只获取一个节点，不再是伪数组
    • 获取的是最初一个
    • 最初一个就是 </p> 始终到 </div> 之间的换行和空格，是个文本节点

  • firstElementChild：获取某一节点下子一级 第一个元素节点

    <body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.firstElementChild) // <p>hello</p>  </script></body>
    • 只获取一个节点，不在是伪数组
    • 获取的是第一个 元素节点
    • 第一个元素节点就是 p 标签，是一个元素节点

  • lastElementChild：获取某一节点下子一级 最初一个元素节点

    <body>  <div>    <p>hello</p>    <p>world</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.lastElementChild) // <p>world</p>  </script></body>
    • 只获取一个节点，不在是伪数组
    • 获取的是最初一个 元素节点
    • 最初一个元素节点是 <p>world</p>，是一个元素节点

  • nextSibling：获取某一个节点的 下一个兄弟节点

    <body>  <ul>    <li id="a">hello</li>    <li id="b">world</li>    <li id="c">!!!</li>  </ul>    <script>    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点      var oLi = document.querySelector('#b')        console.log(oLi.nextSibling) // #text  </script></body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的下一个兄弟节点
    • 因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

  • previousSibling：获取某一个节点的 上一个兄弟节点

    <body>  <ul>    <li id="a">hello</li>    <li id="b">world</li>    <li id="c">!!!</li>  </ul>    <script>    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点      var oLi = document.querySelector('#b')        console.log(oLi.previousSibling) // #text  </script></body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的上一个兄弟节点
    • 因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

  • nextElementSibling：获取某一个节点的 下一个元素节点

    <body>  <ul>    <li id="a">hello</li>    <li id="b">world</li>    <li id="c">!!!</li>  </ul>    <script>    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点      var oLi = document.querySelector('#b')        console.log(oLi.nextElementSibling) // <li id="c">!!!</li>  </script></body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的下一个兄弟元素节点
    • 因为 id="b" 的下一个兄弟元素节点就是 id="c" 的 li，是一个元素节点

  • previousElementSibling：获取某一个节点的 上一个元素节点

    <body>  <ul>    <li id="a">hello</li>    <li id="b">world</li>    <li id="c">!!!</li>  </ul>    <script>    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点      var oLi = document.querySelector('#b')        console.log(oLi.previousElementSibling) // <li id="a">hello</li>  </script></body>
    • 只获取一个节点，不在是伪数组
    • 获取的是 id="b" 这个 li 的上一个兄弟元素节点
    • 因为 id="b" 的上一个兄弟元素节点就是 id="a" 的 li，是一个元素节点

  • parentNode：获取某一个节点的 父节点

    <body>  <ul>    <li id="a">hello</li>    <li id="b">world</li>    <li id="c">!!!</li>  </ul>    <script>    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点      var oLi = document.querySelector('#b')        console.log(oLi.parentNode) // <ul>...</ul>  </script></body>
    • 只获取一个节点，不在是伪数组
    • 获取的是以后这个 li 的父元素节点
    • 因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

  • attributes：获取某一个 元素节点 的所有 属性节点

    <body>  <ul>    <li id="a" a="100" test="test">hello</li>  </ul>    <script>    // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点      var oLi = document.querySelector('#a')        console.log(oLi.attributes)     /*        NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}      0: id      1: a      2: test      length: 3      a: a      id: id      test: test      __proto__: NamedNodeMap        */  </script></body>
    • 获取的是一组数据，是该元素的所有属性，也是一个伪数组
    • 这个 li 有三个属性，id / a / test 三个，所以就获取到了这三个

节点属性

  • 咱们曾经晓得节点会分成很多种，而且咱们也能获取到各种不同的节点
  • 接下来咱们就来聊一些各种节点之间属性的区别

  • 咱们先筹备一段代码

    <body>  <ul test="我是 ul 的一个属性">    <li>hello</li>  </ul>  <script>    // 先获取 ul    var oUl = document.querySelector('ul')        // 获取到 ul 下的第一个子元素节点，是一个元素节点    var eleNode = oUl.firstElementChild        // 获取到 ul 的属性节点组合，因为是个组合，咱们要拿到节点的话要用索引    var attrNode = oUl.attributes[0]    // 获取到 ul 下的第一个子节点，是一个文本节点    var textNode = oUl.firstChild  </script></body>

nodeType

  • nodeType：获取节点的节点类型，用数字示意

    console.log(eleNode.nodeType) // 1console.log(attrNode.nodeType) // 2console.log(textNode.nodeType) // 3
    • nodeType === 1 就示意该节点是一个 元素节点
    • nodeType === 2 就示意该节点是一个 属性节点
    • nodeType === 3 就示意该节点是一个 正文节点

nodeName

  • nodeName：获取节点的节点名称

    console.log(eleNode.nodeName) // LIconsole.log(attrNode.nodeName) // testconsole.log(textNode.nodeName) // #text
    • 元素节点的 nodeName 就是 大写标签名
    • 属性节点的 nodeName 就是 属性名
    • 文本节点的 nodeName 都是 #text

nodeValue

  • nodeValue： 获取节点的值

    console.log(eleNode.nodeValue) // nullconsole.log(attrNode.nodeValue) // 我是 ul 的一个属性console.log(textNode.nodeValue) // 换行 + 空格
    • 元素节点没有 nodeValue
    • 属性节点的 nodeValue 就是 属性值
    • 文本节点的 nodeValue 就是 文本内容

汇总

-nodeTypenodeNamenodeValue
元素节点1大写标签名null
属性节点2属性名属性值
文本节点3\#text文本内容

操作 DOM 节点

  • 咱们所说的操作无非就是 增删改查（CRUD）
  • 创立一个节点（因为向页面中减少之前，咱们须要先创立一个节点进去）
  • 向页面中减少一个节点
  • 删除页面中的某一个节点
  • 批改页面中的某一个节点
  • 获取页面中的某一个节点

创立一个节点

  • createElement：用于创立一个元素节点

    // 创立一个 div 元素节点var oDiv = document.createElement('div')console.log(oDiv) // <div></div>
    • 创立进去的就是一个能够应用的 div 元素

  • createTextNode：用于创立一个文本节点

    // 创立一个文本节点var oText = document.createTextNode('我是一个文本')console.log(oText) // "我是一个文本"

向页面中退出一个节点

  • appendChild：是向一个元素节点的开端追加一个节点

  • 语法： 父节点.appendChild(要插入的子节点)

    // 创立一个 div 元素节点var oDiv = document.createElement('div')var oText = document.createTextNode('我是一个文本')// 向 div 中追加一个文本节点oDiv.appendChild(oText)console.log(oDiv) // <div>我是一个文本</div>
  • insertBefore：向某一个节点前插入一个节点

  • 语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的后面)

    <body>  <div>    <p>我是一个 p 标签</p>  </div>    <script>      var oDiv = document.querySelector('div')    var oP = oDiv.querySelector('p')        // 创立一个元素节点    var oSpan = document.createElement('span')        // 将这个元素节点增加到 div 下的 p 的后面    oDiv.insertBefore(oSpan, oP)        console.log(oDiv)    /*        <div>            <span></span>            <p>我是一个 p 标签</p>        </div>    */  </script></body>

删除页面中的某一个节点

  • removeChild：移除某一节点下的某一个节点

  • 语法：父节点.removeChild(要移除的字节点)

    <body>  <div>    <p>我是一个 p 标签</p>  </div>    <script>      var oDiv = document.querySelector('div')    var oP = oDiv.querySelector('p')        // 移除 div 上面的 p 标签    oDiv.removeChild(oP)        console.log(oDiv) // <div></div>  </script></body>

批改页面中的某一个节点

  • replaceChild：将页面中的某一个节点替换掉

  • 语法： 父节点.replace(新节点，旧节点)

    <body>  <div>    <p>我是一个 p 标签</p>  </div>    <script>      var oDiv = document.querySelector('div')    var oP = oDiv.querySelector('p')        // 创立一个 span 节点    var oSpan = document.createElement('span')    // 向 span 元素中加点文字    oSpan.innerHTML = '我是新创建的 span 标签'           // 用创立的 span 标签替换原先 div 下的 p 标签    oDiv.replaceChild(oSpan, oP)        console.log(oDiv)    /*        <div>            <span>我是新创建的 span 标签</span>        </div>    */  </script></body>

获取元素的非行间款式

  • 咱们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 款式
  • 那么在操作 css 款式的时候，咱们防止不了就要获取元素的款式
  • 之前咱们说过能够用 元素.style.xxx 来获取

  • 然而这个办法只能获取到元素 行间款式，也就是写在行内的款式

    <style>  div {    width: 100px;  }</style><body>  <div style="height: 100px;">    <p>我是一个 p 标签</p>  </div>  <script>    var oDiv = document.querySelector('div')        console.log(oDiv.style.height) // 100px    console.log(oDIv.style.width) // ''  </script></body>
  • 不论是外链式还是内嵌式，咱们都获取不到该元素的款式
  • 这里咱们就要应用办法来获取了 getComputedStyle 和 currentStyle
  • 这两个办法的作用是一样的，只不过一个在 非 IE 浏览器，一个在 IE 浏览器

getComputedStyle（非IE应用）

  • 语法：window.getComputedStyle(元素, null).要获取的属性

    <style>  div {    width: 100px;  }</style><body>  <div style="height: 100px;">    <p>我是一个 p 标签</p>  </div>  <script>    var oDiv = document.querySelector('div')        console.log(window.getComputedStyle(oDiv).width) // 100px    console.log(window.getComputedStyle(oDiv).height) // 100px  </script></body>
    • 这个办法获取行间款式和非行间款式都能够

currentStyle（IE应用）

  • 语法： 元素.currentStyle.要获取的属性

    <style>  div {    width: 100px;  }</style><body>  <div style="height: 100px;">    <p>我是一个 p 标签</p>  </div>  <script>    var oDiv = document.querySelector('div')        console.log(oDiv.currentStyle.width) // 100px    console.log(oDiv.currentStyle.height) // 100px  </script></body>

获取元素的偏移量

  • 就是元素在页面上的什么地位
  • 咱们有几个属性来获取，offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight

offsetLeft 和 offsetTop

  • 获取的是元右边的偏移量和上边的偏移量
  • 分成两个状况来看

  • 没有定位的状况下

    • 获取元素边框外侧到页面内侧的间隔

  • 有定位的状况下

    • 获取元素边框外侧到定位父级边框内侧的间隔（其实就是咱们写的 left 和 top 值）

offsetWidth 和 offsetHeight

  • 获取元素 内容宽高 + padding宽高 + border宽高 的和