欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript Dom元素獲取和添加詳解

 更新時間：2019年09月24日 11:24:19   作者：---空白---  
這篇文章主要介紹了Javascript Dom元素獲取和添加詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

1.Dom元素的獲取

  • document.getElementById()：通過id獲取一個Dom元素
  • document.getElementsByClassName()：通過class名字獲取一個或多個Dom元素（偽數(shù)組）
  • document.getElementsByTagName()：通過標簽名字獲取一個或多個Dom元素（偽數(shù)組）
  • document.querySelector()：獲取指定 CSS 選擇器的一個元素
  • document.querySelectorAll()：獲取指定 CSS 選擇器的多個元素（偽數(shù)組）

ES6選擇器與其他選中器的區(qū)別：

document.getElementsByTagName()和document.getElementsByClassName()獲取到的都是動態(tài)列表

document.querySelectorAll()獲取到的是靜態(tài)列表,Dom結(jié)構(gòu)發(fā)生變化要重新獲取，不然會出問題

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li class="test">1</li>
      <li class="test">2</li>
      <li class="test">3</li>
      <li class="test">4</li>
    </ul>
  </body>
</html>
<script>
  var lis = document.getElementsByTagName('li')
  var liByQuery = document.querySelectorAll('li')
  console.log(lis.length) // 4
  console.log(liByQuery.length) // 4

  // 動態(tài)添加li標簽
  document.querySelector('ul').innerHTML += "<li class='test'>5</li>"
  console.log(lis.length) // 5 
  console.log(liByQuery.length) // 4 
</script>

document.getElementsByTagName()和document.getElementsByClassName()獲取到的是 HTMLCollection，不能使用foreach()遍歷

document.querySelectorAll()獲取到的NodeList，可以使用foreach()遍歷

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=2.0">
    <title>Test</title>
  </head>
  <body>
    <ul>
      <li class="test">1</li>
      <li class="test">2</li>
      <li class="test">3</li>
      <li class="test">4</li>
    </ul>
  </body>
</html>
<script>
  var li = document.getElementsByTagName('li')
  var li2 = document.getElementsByClassName('test')
  var li3 = document.querySelectorAll('li')
  var li4 = document.querySelector('ul').children
  console.log(li) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
  console.log(li2) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
  console.log(li3) // NodeList(4) [li.test, li.test, li.test, li.test]
  console.log(li4) // HTMLCollection(4) [li.test, li.test, li.test, li.test]
</script>

2.Dom元素節(jié)點類型

Dom節(jié)點類型分3類：元素節(jié)點,屬性節(jié)點,文本節(jié)點

每種節(jié)點都有3種屬性 nodeName,nodeType,nodeValue

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <div id="box" title="我在哪">我是誰</div>
  </body>
</html>
<script>
  // 獲取元素節(jié)點
  var box = document.querySelector('#box')
  // 元素節(jié)點的屬性
  console.log(box.nodeName);//DIV
  console.log(box.nodeType); //1
  console.log(box.nodeValue); //一律為null
  
  // 根據(jù)屬性名獲取單個屬性節(jié)點
  var attrTitle = box.getAttributeNode("title")
  // 獲取元素屬性的集合(一個偽數(shù)組對象)
  var box_attributes = box.attributes
  // 屬性節(jié)點的屬性
  console.log(attrTitle.nodeName);//title
  console.log(attrTitle.nodeType); //2
  console.log(attrTitle.nodeValue); //"我在哪"

  // 獲取box的文本節(jié)點（沒有專門的方法用來獲取文本節(jié)點，但是這個div的第一個子節(jié)點就是文本節(jié)點）
  var textNode = box.childNodes[0];
  // 文本節(jié)點的屬性
  console.log(textNode.nodeName);//#text
  console.log(textNode.nodeType); //3
  console.log(textNode.nodeValue); //"我是誰"
</script>

3.獲取Dom元素的子元素，父元素，兄弟元素

通過children屬性可以獲取當前Dom元素的子元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 獲取ul元素
  var ul = document.querySelector('ul')
  // 獲取ul子元素
  var ul_children = ul.children
  // 遍歷子元素
  for(var i=0;i<ul_children.length;i++){
    console.log(ul_children[i].innerHTML)
    // 1
    // 2
    // 3
  }  
</script>

獲取當前元素的父元素

parentElement/parentNode這兩個屬性都可以

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 獲取ul元素
  var ul = document.querySelector('ul')
  // 獲取父元素(ul的父級就是body)
  var parent = ul.parentElement
  var parentNode = ul.parentNode

  console.log(parent.nodeName) // BODY
  console.log(parentNode.nodeName) // BODY
</script>

獲取當前元素的兄弟元素

previousElementSibling屬性：上一個兄弟元素

nextElementSibling屬性：下一個兄弟元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li id="test">2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 獲取id為test的li元素
  var li = document.querySelector('#test')
  // 獲取兄弟元素
  var preBrother = li.previousElementSibling
  var nextBrother = li.nextElementSibling

  console.log(preBrother.innerHTML) // 1
  console.log(nextBrother.innerHTML) // 3
</script>

注意：

children與childNodes，前者只包含元素節(jié)點，而后者為元素節(jié)點+文本節(jié)點（回車換行也算是文本節(jié)點）

而previousElementSibling與previousSibling，nextElementSibling與nextSibling也一個道理

firstChild和lastChild：firstChild等價于childNodes[0]，lastChild相當于childNodes的最后一個元素

4.DOM元素的添加與移除

添加子元素

appendChild()：將目標元素作為子元素添加到當前元素的最后面

insertBefore()：將目標元素作為子元素添加到當前元素中，位置可以自由選擇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li id="test">2</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  // 獲取ul元素
  var ul = document.querySelector('ul')
  // 創(chuàng)建li元素
  var liNode = document.createElement('li')
  liNode.innerHTML = "4"
  // 將創(chuàng)建的li元素添加到ul中(最后面)
  ul.appendChild(liNode)

  // 再創(chuàng)建li元素
  var liNode2 = document.createElement('li')
  liNode2.innerHTML = "life"

  var li_test = document.querySelector('#test')
  // 將創(chuàng)建的li元素添加到ul中(li_test的前面)
  ul.insertBefore(liNode2,li_test)
</script>

運行結(jié)果

<ul>
  <li>1</li>
  <li>life</li>
  <li id="test">2</li>
  <li>3</li>
  <li>4</li>
</ul>

刪除子元素和替換子元素

removeChild()：刪除子元素

replaceChild()：替換子元素

語法：parent.removeChild(child)

語法：parent.removeChild(替換的元素, 被替換的元素)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <style>
    *{padding: 0;margin: 0;}
  </style>
  <body>
    <ul>
      <li>1</li>
      <li id="test">2</li>
      <li id="replace">3</li>
    </ul>
  </body>
</html>
<script>
  // 獲取ul元素
  var ul = document.querySelector('ul')

  // 獲取要刪除的li元素
  var li_test = document.querySelector('#test')
  // 刪除子元素
  ul.removeChild(li_test)

  // 獲取要替換的li元素
  var li_replace = document.querySelector('#replace')
  // 創(chuàng)建要替換的元素
  var newLI = document.createElement('li')
  newLI.innerHTML = "replace li tag"
  // 替換元素
  ul.replaceChild(newLI,li_replace)
</script>

運行結(jié)果：

<ul>
  <li>1</li>      
  <li>replace li tag</li>
</ul>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript十六進制及二進制轉(zhuǎn)化的方法

    javascript十六進制及二進制轉(zhuǎn)化的方法

    這篇文章主要介紹了javascript十六進制及二進制轉(zhuǎn)化的方法,涉及javascript中toString方法的使用技巧,需要的朋友可以參考下
    2015-05-05
  • javascript不可用的問題探究

    javascript不可用的問題探究

    在Twitter上的一些有趣的討論中, 我發(fā)現(xiàn)人們對于Web應(yīng)用和站點對javascript的依賴普遍存在一種疑惑. 這種疑惑一直都存在, 而對我而言, 這個問題隨著瀏覽技術(shù)的飛躍發(fā)展而集中爆發(fā)了
    2013-10-10
  • JavaScript開發(fā)簡單易懂的Svelte實現(xiàn)原理詳解

    JavaScript開發(fā)簡單易懂的Svelte實現(xiàn)原理詳解

    這篇文章主要為大家介紹了JavaScript開發(fā)簡單易懂的Svelte實現(xiàn)原理的內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步
    2021-11-11
  • 實例分析瀏覽器中“JavaScript解析器”的工作原理

    實例分析瀏覽器中“JavaScript解析器”的工作原理

    本文主要對javascript解析器的工作原理進行實例分析，具有很好的參考價值，下面就跟小編一起來看下吧
    2016-12-12
  • 微信小程序時間軸實現(xiàn)方法示例

    微信小程序時間軸實現(xiàn)方法示例

    這篇文章主要介紹了微信小程序時間軸實現(xiàn)方法,結(jié)合實例形式分析了微信小程序wx:for語句使用與時間軸縱向布局相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • js動態(tài)修改表格行colspan列跨度的方法

    js動態(tài)修改表格行colspan列跨度的方法

    這篇文章主要介紹了js動態(tài)修改表格行colspan列跨度的方法,實例分析了javascript動態(tài)修改html中table屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • 一文解決微信小程序button、input和image表單組件

    一文解決微信小程序button、input和image表單組件

    在微信小程序開發(fā)中,input?用來實現(xiàn)文本輸入,如輸入用戶名密碼等等,下面這篇文章主要給大家介紹了關(guān)于如何通過一文解決微信小程序button、input和image表單組件的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • 關(guān)于元素的尺寸(dimensions) 說明

    關(guān)于元素的尺寸(dimensions) 說明

    在使用JavaScript腳本獲取元素的尺寸時，有幾個屬性你需要弄清楚，不然會很棘手。
    2011-09-09
  • 詳解ES6 Symbol 的用途

    詳解ES6 Symbol 的用途

    Symbol 唯一的用途就是標識對象屬性，表明對象支持的功能。 這篇文章給大家介紹ES6 Symbol 的用途，感興趣的朋友跟隨小編一起看看吧
    2018-10-10
  • 微信小程序?qū)W習(xí)之wxs使用教程

    微信小程序?qū)W習(xí)之wxs使用教程

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)之wxs使用教程的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05

最新評論