Javascript基礎篇: 常見的Dom基本操做方法

時間 2019-11-17

標籤 javascript 基礎常見的 dom 基本方法欄目 JavaScript 简体版

原文原文鏈接

1、文檔元素選取

1.一、ID選擇器

經過ID選取元素是最簡單和經常使用的選取元素的方法，ID選擇器性能優於其餘選擇器html

var title = document.getElementById("title");
複製代碼

ID不存在，則返回nullnode

1.二、名稱選擇器

基於name屬性的值選取元素區別於ID選擇器。數組

其一： name屬性值不是必須唯一，多個元素能夠能一樣的名稱；其二： name屬性只在少數HTML元素中有效，包括表單、表單元素、iframe以及img 元素bash

var sports = document.getElementsByName("sports");
複製代碼

ID不存在，則返回nullapp

1.三、標籤選擇器

利用HTML元素的標籤名稱選取指定類型的元素post

var h1 = document.getElementsByTagName("h1");
複製代碼

1.四、類選擇器

利用HTML的class屬性值選擇元素性能

var title = document.getElementsByClassName("title");
複製代碼

1.五、CSS單元素選擇器

經過CSS樣式表選擇器的強大語法，來選擇元素。返回第一個匹配的元素ui

var title = document.querySelector("#title");   // CSS ID選擇
var h1 = document.querySelector("h1");     //選取第一個h1元素
複製代碼

1.六、CSS多元素選擇器

經過CSS樣式表選擇器的強大語法，來選擇元素。返回元素數組spa

var h1s = document.querySelectorAll("h1");   //返回全部h1標籤元素
複製代碼

2、Dom遍歷

2.1 節點相關

2.1.1 父節點-parentNode

返回父節點，若是document 對象調用則返回 nullcode

var title = document.querySelector("#title");
 title.parentNode.style.color = "red";
複製代碼

2.1.2 子節點-childNodes

返回全部子節點，即NodeList對象

var parent = document.querySelector("#parent");
  var children = parent.childNodes;
  for(var i =0; i< children.length; i++) {
  	console.log(i+"="+children[i].nodeName);
  }
  console.log(children.length);
複製代碼

2.1.3 首子節點-firstChild

返回第一個子節點

var parent = document.querySelector("#parent");
  var first = parent.firstChild;
  first.style.color = "red";
複製代碼

2.1.4 首子節點-lastChild

返回最後一個子節點

var parent = document.querySelector("#parent");
  var last = parent.lastChild;
  last.style.color = "red";
複製代碼

2.1.5 下一兄弟節點-nextSibling

返回下一個兄弟節點

var title = document.querySelector("#title");
  var next = title.nextSibling;
  next.style.color = "red";
複製代碼

2.1.6 前一兄弟節點-previousSibling

返回前一個兄弟節點

var title = document.querySelector("#title");
  var pre = title.previousSibling;
  pre.style.color = "red";
複製代碼

2.1.7 節點類型-nodeType

返回節點類型的數字表示

1-表明Element節點
 3-表明Text節點
 8-表明Comment節點
 9-表明Document節點
 11-表明DocumentFragment節點 
複製代碼

2.1.8 節點值-nodeValue

返回Text 節點或 Comment 節點的值

var title = document.querySelector("#title");
  console.log(title.firstChild.nodeValue);
複製代碼

2.1.9 節點名-nodeName

返回元素的標籤名，以大寫形式表示

var title = document.querySelector("#title");
  console.log(title.nodeName);
  console.log(title.firstChild.nodeName);
複製代碼

2.2 元素相關

2.2.1 子元素-children

返回全部子元素

var parent = document.querySelector("#parent");
  var children = parent.children;
  for(var i =0 ;i < children.length; i++) {
  	children[i].style.color = "red";
  }
  console.log(children.length);
複製代碼

2.2.2 首子元素-firstElementChild

返回全部子元素中的第一個（節點是元素的一種）

var parent = document.querySelector("#parent");
  var first = parent.firstElementChild;
  first.style.color = "red";
複製代碼

2.2.3 尾子元素-lastElementChild

返回全部子元素中的最後一個

var parent = document.querySelector("#parent");
  var last = parent.lastElementChild;
  last.style.color = "red";
複製代碼

2.2.4 下一兄弟元素 nextElementSibling

返回下一個兄弟元素

var title = document.querySelector("#title");
  var next = title.nextElementSibling;
  next.style.color = "red";
複製代碼

2.2.5 下一兄弟元素 previousElementSibling

返回前一個兄弟元素

var title = document.querySelector("#title");
  var previous = title.previousElementSibling;
  previous.style.color = "red";
複製代碼

2.2.6 子元素數量

返回子元素的數量

var parent = document.querySelector("#parent");
  console.log(parent.childElementCount);
複製代碼

3、屬性

3.1 標準屬性

表示HTML文檔元素的HTMLElement對象定義了讀/寫屬性，它們對應於元素的HTML屬性。 HTMLElement定義的通用HTML屬性，包括id、lang、dir、事件處理程序onclick及表單相關屬性等。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十課 - JavaScript DOM操做之標準屬性</title>
    <script src="http://res.30ke.cn/res/js/console.js"></script>
</head>
<body>
  <form id="myform">
    <input type="text" value="毛瑞" />  
  </form>
  <div id="main"></div>
<script>
  var form = document.querySelector("#myform");
  form.action = "http://30ke.cn";
  form.method = "post";
  console.log(form.id);
  console.log(form.action);
  console.log(form.method);
</script>
</body>
</html>
複製代碼

3.2 非標準屬性

3.2.1 獲取屬性值 - getAttribute

返回非標準的HTML屬性的值

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  console.log(img.getAttribute("width"));
</script>
</body>
複製代碼

3.2.2 屬性值設置 - setAttribute

設置非標準的HTML屬性的值

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.setAttribute("width","400px");
  console.log(img.getAttribute("width"));
</script>
</body>
複製代碼

3.2.3 屬性存在檢測 - hasAttribute

返回布爾值，用來檢測屬性是否存在

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  console.log(img.hasAttribute("width"));
  console.log(img.hasAttribute("height"));
</script>
</body>
複製代碼

3.2.4 刪除屬性 - removeAttribute

刪除某一屬性

<body>
  <img id="img" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  img.removeAttribute("width");
  console.log(img.getAttribute("width"));
</script>
</body>
複製代碼

3.3 數據集屬性- dataset

在HTML5文檔中，任意以 data- 爲前綴的小寫的屬性名字都是合法的。這些「數據集屬性」定義了一種標準的、附加額外數據的方法

<body>
  <img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  var x = img.dataset.x;
  console.log(x);
</script>
</body>
複製代碼

3.4 元素屬性 - attributes

Node節點定義了 attributes 屬性，針對 Element 對象，attributes 是元素全部屬性的類數組對象

var attributes = img.attributes;
複製代碼

索引 attributes 對象獲得的值是 Attr 對象。Attr 的 name 和 value 返回該屬性的名字和值

<body>
  <img id="img" data-x="100" src="http://res.30ke.cn/res/image/30ke.png" width="200px" />
  <div id="main"></div>
<script>
  var img = document.querySelector("#img");
  var attributes = img.attributes;
  console.log(attributes[0].name+" : "+ attributes[0].value);
  console.log(attributes.src.value);
  console.log(attributes["width"].value);
</script>
</body>
複製代碼

4、元素內容

4.1 元素內容 - innerHTML

innerHTML 屬性以字符串形式返回這個元素的內容。也能夠用來替換元素當前內容

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  parent.innerHTML = "<h1>三十課</h1>";
  alert(parent.innerHTML);
</script>
</body>
複製代碼

4.2 元素及內容 - outerHTML

outerHTML 屬性以字符串形式返回這個元素及內容。也能夠用來替換元素當前內容

<body>
  <div id="parent">三十課</div>
<script>
  var parent = document.querySelector("#parent");
  alert(parent.outerHTML);
  parent.outerHTML = "<h1>三十課</h1>";  // 注意：div 變成了 h1
</script>
</body>
複製代碼

4.3 純文本元素內容 - textContent

查詢或替換純文本元素內容的標準方法是用Node的textContent屬性來實現。在IE中，能夠用Element的innerText屬性來代替

<body>
  <h1 id="title">三十課</h1>
  <div id="main"></div>
<script>
  var title = document.querySelector("#title");
  console.log(title.textContent);
  title.textContent = "三十課2";
</script>
</body>
複製代碼

5、建立節點

5.1 建立元素節點 - createElement

使用document 對象的createElement () 方法建立新的Element節點

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  var h1 = document.createElement("h1");
  h1.textContent = "三十課";
  parent.appendChild(h1);
</script>
</body>
複製代碼

5.2 建立文本節點 - createTextNode

建立純文本節點

<body>
  <h1 id="title"></h1>
<script>
  var title = document.querySelector("#title");
  var txt = document.createTextNode("三十課");
  title.appendChild(txt);
</script>
</body>
複製代碼

5.3 建立文檔片斷 - createDocumentFragment

使用文檔片斷一般會帶來更好的性能。由於文檔片斷存在於內存中，並不在Dom樹中，因此將子元素插入到文檔片斷時不會引發頁面迴流（對元素位置和幾何上計算）

<body>
  <div id="parent"></div>
<script>
  var parent = document.querySelector("#parent");
  var fragment = document.createDocumentFragment();
  var h1 = document.createElement("h1");
  h1.textContent = "三十課";
  fragment.append(h1);
  parent.append(fragment);
</script>
</body>
複製代碼

5.4 建立註釋節點 -- createCmoment

建立註釋節點不常常使用

<body>
  <h1 id="title">三十課</h1>
<script>
  var title = document.querySelector("#title");
  var comment = document.createComment("Created by 毛瑞");
  title.appendChild(comment);
</script>
</body>
複製代碼

5.5 節點克隆 -- cloneNode

經過複製已存在的節點來建立新的文檔節點。傳參數true表示深克隆，false表示淺複製

<body>
  <div id="parent">
    <h1 class="title">三十課</h1>
  </div>
<script>
  var parent = document.querySelector("#parent");
  var titles = document.querySelectorAll(".title");
  var title2 = titles[0].cloneNode(true);
  parent.appendChild(title2);
</script>
</body>
複製代碼

6、插入節點

6.1 插入自節點 -- appendChild

在指定元素上插入子節點，並使其成爲該節點的最後一個子節點

<body>
  <div id="parent">
    <h1 id="title">三十課</h1>
  </div>
<script>
  var parent = document.querySelector("#parent");
  var h2 = document.createElement("h2");
  h2.textContent = "毛瑞的筆記本";
  parent.appendChild(h2);
</script>
</body>
複製代碼

6.2 節點前插入 -- insertBefore

1. 在父節點上調用本方法

2. 第一參數表示待插入的節點

3. 第二參數是父節點中已經存在的子節點，新節點插入到該節點的前面
複製代碼

<body>
  <div>
    <h2 id="subTitle">毛瑞的筆記本</h2>
  </div>
<script>
  var h2 = document.querySelector("#subTitle");
  var h1 = document.createElement("h1");
  h1.textContent = "三十課";
  h2.parentNode.insertBefore(h1,h2);
</script>
</body>
複製代碼

7、刪除和替換

7.1 刪除子節點 -- removeChild

1. 在父節點上調用

2. 參數是待刪除的節點

複製代碼

<body>
  <div>
    <h1>三十課</h1>
    <h2 id="subTitle">毛瑞的筆記本</h2>
  </div>
<script>
  var h2 = document.querySelector("#subTitle");
  h2.parentNode.removeChild(h2);
</script>
</body>
複製代碼

7.2 替換子節點 -- replaceChild

1. 在父節點上調用

2. 第一參數是新節點

3. 第二個參數是須要替換的節點

複製代碼

<body>
  <div>
    <h1>三十課</h1>
    <h2 id="subTitle">毛瑞的筆記本</h2>
  </div>
<script>
  var h2 = document.querySelector("#subTitle");
  var h2n = document.createElement("h2");
  h2n.textContent = "毛瑞的新筆記本2";
  h2.parentNode.replaceChild(h2n, h2);
</script>
</body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。