97视频三极,嗯～啊91,伊人大久av

一. DOM獲取頁(yè)面上的元素

<!-- DOM獲取頁(yè)面上的元素 -->
<div class="container">
  <button id="btn">按鈕1</button>
  <button class="cls">按鈕2</button>
  <button class="cls">按鈕3</button>
  <button name="mybtn">按鈕4</button>
  <button name="mybtn">按鈕5</button>
</div>

1. 根據(jù) id 獲取

返回指定id的元素

var btnId = document.getElementById("btn");
btnId.style.backgroundColor = "red";

2. 根據(jù) class 獲取

返回一個(gè)集合

var btnCls = document.getElementsByClassName('cls');
btnCls[0].style.backgroundColor = 'green';
btnCls[1].style.backgroundColor = 'green';

3. 根據(jù) name 獲取

返回一個(gè)集合

var btnName = document.getElementsByName('mybtn');
btnName[0].style.backgroundColor = 'yellow';
btnName[1].style.backgroundColor = 'yellow';

4. 根據(jù) 標(biāo)簽名獲取

返回一個(gè)集合

var btnTag = document.getElementsByTagName('button');
for (var i = 0; i < btnTag.length; i++) {
  btnTag[i].style.backgroundColor = 'pink';
}

5. 根據(jù) querySelector 獲取

只返回匹配選擇器的第一個(gè)元素

var btn  =  document.querySelector('#btn');
var cls  =  document.querySelector('.cls');
var myBtn=  document.querySelector('button');

6. 根據(jù) querySelectorAll 獲取

返回匹配選擇器的所有元素(集合)

var btns  =  document.querySelectorAll('div>button');
var myBtns=  document.querySelectorAll('.cls');
var buttons=  document.querySelectorAll('button');

二. DOM 樹(shù)的組成

元素節(jié)點(diǎn)

屬性節(jié)點(diǎn)

文本節(jié)點(diǎn)

三. 節(jié)點(diǎn)

1. nodeType 查看節(jié)點(diǎn)的類型

元素節(jié)點(diǎn) 1

屬性節(jié)點(diǎn) 2

文本節(jié)點(diǎn) 3

注釋節(jié)點(diǎn) 8

<div class="box">一個(gè)盒子</div>
<script>
  var oBox = document.querySelector('.box');
  console.log(oBox.nodeType); // 1
  console.log(oBox.attributes['class'].nodeType); // 2
  console.log(oBox.childNodes[0].nodeType); // 3
</script>

2. nodeName 查看節(jié)點(diǎn)的名稱

獲取的節(jié)點(diǎn)名稱都是大寫(xiě)的

<div class="box">一個(gè)盒子</div>
<script>
  console.log(oBox.nodeName); // DIV
</script>

3. nodeValue 查看節(jié)點(diǎn)的值

獲取文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)的值

<div class="box">一個(gè)盒子</div>
<script>
  console.log(oBox.childNodes[0].nodeValue); // 一個(gè)盒子
  console.log(oBox.attributes['class'].nodeValue); // box
</script>

4. innerHTML 和 nodeValue的區(qū)別

取值的區(qū)別

nodeValue 可以獲取文本節(jié)點(diǎn)的內(nèi)容和屬性節(jié)點(diǎn)的值。

innerHTML只能獲取元素節(jié)點(diǎn)中的內(nèi)容。

賦值的區(qū)別

nodeValue 會(huì)把包含在文本里的HTML標(biāo)簽按原樣輸出。

innerHTML 可以解析內(nèi)部的HTML標(biāo)簽

四. 屬性的操作

1. 固有屬性

attributes 獲取當(dāng)前元素所有的屬性

getAttribute("屬性名稱") 獲取屬性的值

setAttribute("屬性名稱", "屬性的值") 設(shè)置屬性

removeAttribute("屬性名稱") 刪除屬性

<div class="boxClass box" id="boxID">一個(gè)盒子 </div>
<script>
  // (1) attributes
  console.log(oBox.attributes); // 返回一個(gè) NamedNodeMap 節(jié)點(diǎn)列表
  console.log(oBox.attributes[1].nodeValue); // boxID
  console.log(oBox.attributes.class.nodeValue); // boxClass box

  // (2) getAttribute("屬性名稱")
  console.log(oBox.getAttribute('id')); // boxID

  // (3) setAttribute("屬性名稱", "屬性的值")
  oBox.setAttribute('title', 'hello');

  // (4) removeAttribute("屬性名稱")
  oBox.removeAttribute('title');
</script>

2. 狀態(tài)屬性

checked, selected, disabled等ed結(jié)尾的屬于狀態(tài)屬性

狀態(tài)屬性不能使用get/set/removeAttribute等屬性

狀態(tài)屬性直接設(shè)置true/false

<input class="ipt" type="checkbox">
<script>
  var oIpt = document.querySelector('.ipt');
  // 1) 設(shè)置狀態(tài)屬性
  oIpt.checked = true;

  // 2) 獲取狀態(tài)屬性
  console.log(oIpt.checked); // true

  // 3) 刪除狀態(tài)屬性
  oIpt.checked = false;
</script>

五. 父節(jié)點(diǎn)

1. parentNode

父節(jié)點(diǎn), 頂級(jí)到document, 最終到null

2. parentElement

父節(jié)點(diǎn) ,頂級(jí)到html, 最終到null

<html>
...
  <body>
      <div id="box">
          <div id="inner"></div>
      </div>
  </body>
</html>
<script>
  var oInner = document.querySelector('#inner');
  // (1) parentNode
  console.log(oInner.parentNode); // <div id="box">...<div>
  console.log(oInner.parentNode.parentNode.parentNode.parentNode); // document
  console.log(oInner.parentNode.parentNode.parentNode.parentNode.parentNode); // null
  // (2) parentElement
  console.log(oInner.parentElement); // <div id="box">...<div>
  console.log(oInner.parentElement.parentElement.parentElement); // html
  console.log(oInner.parentElement.parentElement.parentElement.parentElement); // null
</script>

六. 子節(jié)點(diǎn)

<!-- 子節(jié)點(diǎn) -->
<ul class="list">
  <li>li01</li>
  <li>li02</li>
  <li>li03</li>
  <li>li04</li>
  <li>li05</li>
</ul>
<script>
  var oList = document.querySelector('.list');
<script>

1. childNodes

包含所有子元素節(jié)點(diǎn)和子文本節(jié)點(diǎn)

遵循w3c規(guī)范

注: 換行也算一個(gè)文本節(jié)點(diǎn)

console.log(oList.childNodes.length); // 11
// 清空文本節(jié)點(diǎn),僅保留元素節(jié)點(diǎn), 元素節(jié)點(diǎn)類型為 1
  for (var i = 0; i < oList.childNodes.length; i++) {
    if (oList.childNodes[i].nodeType === 1) {
      listArr.push(oList.childNodes[i]);
    }
  }
console.log(listArr.length); // 5

2. children

所有元素子節(jié)點(diǎn)

在IE6,7,8下, 會(huì)把注釋節(jié)點(diǎn)當(dāng)做元素節(jié)點(diǎn)

console.log(oList.children.length); //5

3. firstChild, lastChild

firstChild 第一個(gè)子元素節(jié)點(diǎn)

lastChild, 最后一個(gè)子元素節(jié)點(diǎn)

包含元素節(jié)點(diǎn)和文本節(jié)點(diǎn)

在IE6,7,8下是元素節(jié)點(diǎn), 在google下是undefined

注: 換行也算一個(gè)文本節(jié)點(diǎn)

console.log(oList.firstChild); // #text
console.log(oList.lastChild); // #text

4. firstElementChild, lastElementChild

firstElementChild第一個(gè)子元素節(jié)點(diǎn)

lastElementChild, 最后一個(gè)子元素節(jié)點(diǎn)

console.log(oList.firstElementChild.childNodes[0].nodeValue); // li01
console.log(oList.lastElementChild.childNodes[0].nodeValue); // li05

5. 兼容寫(xiě)法

firstChild, firstElementChild

lastChild, lastElementChild

var oFirst = oList.firstElementChild || oList.firstChild;
var oLast = oList.lastElementChild || oList.lastChild;

七. 兄弟節(jié)點(diǎn)

<ul class="list">
   <li>li01</li>
  <li>li02</li>
  <li class="li3">li03</li>
  <li>li04</li>
  <li>li05</li>
</ul>
<script>
    var oList = document.getElementsByClassName('list')[0];
    var lis2 = oList.children[1];
</script>

1. nextSibling, previousSibling

nextSibling 后一個(gè)兄弟節(jié)點(diǎn)

previousSibling 前一個(gè)兄弟節(jié)點(diǎn)

包含元素節(jié)點(diǎn)和文本節(jié)點(diǎn)

注: 換行也算一個(gè)文本節(jié)點(diǎn)

// (1) nextSibling
console.log(lis2.nextSibling); // #text

// (2) previousSibling
console.log(lis2.previousSibling); // #text

2. nextElementSibling, previousElementSibling

nextElementSibling 后一個(gè)兄弟節(jié)點(diǎn)

previousElementSibling 前一個(gè)兄弟節(jié)點(diǎn)

只包含元素節(jié)點(diǎn)

 // (1) nextElementSibling
console.log(lis2.nextElementSibling.childNodes[0].nodeValue); // li03

// (2) previousElementSibling
console.log(lis2.previousElementSibling.childNodes[0].nodeValue); // li01

3. 兼容寫(xiě)法

nextSibling, nextElementSibling

previousSibling, previousElementSibling

var oNext = lis2.nextElementSibling || lis2.nextSibling;
var oPre = lis2.previousElementSibling || lis2.previousSibling;

八. 節(jié)點(diǎn)的操作

1. 創(chuàng)建節(jié)點(diǎn)

document.createElement() 創(chuàng)建元素節(jié)點(diǎn)

document.createTextNode() 創(chuàng)建文本節(jié)點(diǎn)

document.createComment() 創(chuàng)建注釋節(jié)點(diǎn)

var oDiv = document.createElement('div'); //創(chuàng)建元素節(jié)點(diǎn)
var oTxt = document.createTextNode('我是創(chuàng)建的文本節(jié)點(diǎn)'); // 創(chuàng)建文本節(jié)點(diǎn)
var oCom = document.createComment('我是div的注釋'); // 創(chuàng)建注釋節(jié)點(diǎn)

2. 追加節(jié)點(diǎn)

父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn))

document.body.appendChild(oDiv); // 往頁(yè)面追元素節(jié)點(diǎn)
oDiv.appendChild(oCom); // 追加注釋
oDiv.appendChild(oTxt); // 追加文本

3. 插入節(jié)點(diǎn)

父節(jié)點(diǎn).insertBefore(新的節(jié)點(diǎn), 參照節(jié)點(diǎn)) 插入節(jié)點(diǎn)

insertBefore第二個(gè)參數(shù)如果為null,等價(jià)于往父元素最后插入一個(gè)新節(jié)點(diǎn)

// 在oLi4前插入新節(jié)點(diǎn)
oList.insertBefore(newLi, oLi4); // 在oLi4前插入newLi

4. 替換節(jié)點(diǎn)

父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn), 被替換的節(jié)點(diǎn))

oList.replaceChild(newLi, oLi4); // 將oLi4替換為newLi

5. 刪除節(jié)點(diǎn)

父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))

沒(méi)有兼容問(wèn)題,繁瑣了點(diǎn)

子節(jié)點(diǎn).remove() 自殺式刪除

有兼容問(wèn)題,ie不行

oList.removeChild(oLi2); // 刪除oList里面的oLi2節(jié)點(diǎn)
oLi1.remove(); // 刪除oLi1節(jié)點(diǎn)

5. 克隆節(jié)點(diǎn)

cloneNode() 默認(rèn)false, 淺克隆

cloneNode(false) 淺克隆, 默認(rèn), 只會(huì)克隆自身結(jié)構(gòu), 不會(huì)克隆子元素

cloneNode(true) 深克隆, 會(huì)克隆自身結(jié)構(gòu), 還會(huì)克隆子元素

var newLi1 = oLi2.cloneNode(false); // 淺克隆
var newLi2 = oLi2.cloneNode(true); // 深克隆

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

2022-01-14 day10 DOM

一. DOM獲取頁(yè)面上的元素

1. 根據(jù) id 獲取

2. 根據(jù) class 獲取

3. 根據(jù) name 獲取

4. 根據(jù) 標(biāo)簽名 獲取

5. 根據(jù) querySelector 獲取

6. 根據(jù) querySelectorAll 獲取

二. DOM 樹(shù)的組成

三. 節(jié)點(diǎn)

1. nodeType 查看節(jié)點(diǎn)的類型

2. nodeName 查看節(jié)點(diǎn)的名稱

3. nodeValue 查看節(jié)點(diǎn)的值

4. innerHTML 和 nodeValue的區(qū)別

四. 屬性的操作

1. 固有屬性

2. 狀態(tài)屬性

五. 父節(jié)點(diǎn)

1. parentNode

2. parentElement

六. 子節(jié)點(diǎn)

1. childNodes

2. children

3. firstChild, lastChild

4. firstElementChild, lastElementChild

5. 兼容寫(xiě)法

七. 兄弟節(jié)點(diǎn)

1. nextSibling, previousSibling

2. nextElementSibling, previousElementSibling

3. 兼容寫(xiě)法

八. 節(jié)點(diǎn)的操作

1. 創(chuàng)建節(jié)點(diǎn)

2. 追加節(jié)點(diǎn)

3. 插入節(jié)點(diǎn)

4. 替換節(jié)點(diǎn)

5. 刪除節(jié)點(diǎn)

5. 克隆節(jié)點(diǎn)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

4. 根據(jù) 標(biāo)簽名獲取