當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript DOM 学习笔记

發布時間：2024/1/8 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript DOM 学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

Dom 基礎
- Dom 基本概念
- 節點類型
- 獲取元素
- - getElementByld()
  - getElementsByTagName()
  - getElementsByClassName()
  - querySelector() && querySelectorAll()
  - getElementsByName()
  - document.title 和 document.body
- 創建元素
- 插入元素
- - appendChild()
  - insertBefore()
- 刪除元素
- 復制元素
- 替換元素
DOM 進階
- HTML 屬性操作
- - 獲取HTML 屬性值
  - 設置 HTML 屬性值
- HTML 屬性操作
- - getAttribute()
  - setAttribute()
  - removeAttribute()
  - hasAttribute()
- CSS 屬性操作
- - 獲取 CSS 屬性值
  - 設置 CSS 屬性值
- DOM 遍歷
- - 查找父元素
  - 查找子元素
  - 查找兄弟元素
- innerHTML && innerText

Dom 基礎

Dom 基本概念

DOM 全稱 Document Object Model 模型
DOM 操作，可以簡單理解成元素操作

節點類型

JavaScript 中，DOM 節點共 12 種類型，常見的三種是元素節點、屬性節點、文本節點

節點類型

n o d e T y p e

值

元素節點	1
數學節點	2
文本節點	3

節點跟元素是不一樣的概念，節點是包括元素的
節點類型注意👇
一個元素就是一個節點，這個節點稱之為 “元素節點”
屬性節點和文本節點看起來像是元素節點的一部分，實際上是獨立的節點，并不屬于元素節點
只有元素節點才可以擁有子節點，屬性節點和文本節點都無法擁有子節點

獲取元素

getElementByld()

瀏覽器解析一個頁面從上到下，使用 window.onload 使得瀏覽器把整個頁面解析完了再去解析 window.onload 內部的代碼

document.getElementById("id名") //通過 id 獲取元素(單個) <script>window.onload = function(){//自己寫的代碼} </script>

getElementsByTagName()

辨析
getElementById() 獲取的是一個元素，而 getElementsByTagName() 獲取的是多個元素(偽數組)
getElementById() 前面只能接 document，getElementsByTagName() 前面不僅可以接 document，還可以接其余 DOM 對象
getElementById() 不可以操作動態創建的 DOM 元素，而 getElementsByTagName() 可以操作動態創建的 DOM

getElementsByClassName()

getElementsByClassName() 不能動態操作 DOM

document.getElementsByClassName("類名") //通過類名獲取元素

querySelector() && querySelectorAll()

document.querySelector("選擇器"); //選擇滿足條件的第一個元素 document.querySelectorAll("選擇器"); //選擇滿足條件的所有元素

對于 id 選擇器來說，由于頁面只有一個元素，建議使用 getElementById()，因為效率更高

getElementsByName()

getElementsByName 表單元素有 name 屬性，通過 name 屬性獲取表單元素

document.getElementsByName("name名")

getElementsByName 只用于表單元素，一般只用于單選框和復選框

document.title 和 document.body

一個頁面只有一個 title 和 body 元素，JavaScript 提供了兩個非常方便的方法：document.title 和 document.body

創建元素

動態 DOM ：使用 JavaScript 創建的元素，這個元素一開始在 HTML 中是不存在的

var e1 = document.createElement("元素名"); //創建元素節點 var txt = document.createTextNode("文本內容"); //創建文本節點 e1.appendChild(txt); //把文本節點插入元素節點中 e2.appendChild(e1); //把組裝好的元素插入已存在的元素中

動態創建圖片

動態創建表單

插入元素

appendChild()

appendChild：把一個新元素插入到父元素的內部子元素的末尾

A.appendChild(B); //A 父元素,B子元素 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");//為按鈕添加事件obtn.onclick = function(){var oul = document.getElementById("list");var otxt = document.getElementById("txt");//將文本框內容轉化為 "文本結點"var textNode = document.createTextNode(otxt.value);//動態創建一個 li 元素var oli = document.createElement("li");//將文本節點插入 li 元素中去oli.appendChild(textNode);//將 li 元素插入 ul 元素中oul.appendChild(oli);}}</script></head><body><ul id = "list"><li>Java</li></ul><input id = "txt" type="text" /><input id="btn" type="button" value="插入" /></body> </html>

insertBefore()

insertBefore 將一個新元素插入到父親元素中的某一個元素之前

A.insertBefore(B, ref); //A父元素,B新的子元素,ref表示指定子元素,在ref之前插入子元素 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");//為按鈕添加事件obtn.onclick = function(){var oul = document.getElementById("list");var otxt = document.getElementById("txt");//將文本框內容轉化為 "文本結點"var textNode = document.createTextNode(otxt.value);//動態創建一個 li 元素var oli = document.createElement("li");//將文本節點插入 li 元素中去oli.appendChild(textNode);//將 li 元素插入到 ul 的第一個子元素前面oul.insertBefore(oli, oul.firstElementChild);}}</script></head><body><ul id = "list"><li>Java</li></ul><input id = "txt" type="text" /><input id="btn" type="button" value="插入" /></body> </html>

appendChild() 與 insertBefore() 插入元素的方法都需要獲取父元素才可以進行操作

刪除元素

removeChild()：刪除父元素下的某個子元素

A.removeChild(B) //A表示父元素,B表示子元素 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");//為按鈕添加事件obtn.onclick = function(){var oul = document.getElementById("list");//刪除最后一個元素oul.removeChild(oul.lastElementChild);/*刪除第一個元素oul.removeChild(oul.firstElementChild);刪除列表document.body.removeCild(oul);*/}}</script></head><body><ul id = "list"><li>Java</li></ul><input id="btn" type="button" value="刪除" /></body> </html>

removeChild 方法必須找到被刪除的子元素；被刪除子元素的父元素

復制元素

obj.cloneNode(bool) /* 參數 obj 表示被復制的元素，而參數 bool 是一個布爾值，取值如下: 1 或 true: 表示復制元素本身以及復制該元素下的所有子元素 0 或 false: 表示僅僅復制元素本身,不復制該元素下的子元素 */ <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");obtn.onclick = function(){var oul = document.getElementById("list");document.body.appendChild(oul.cloneNode(true));}}</script></head><body><ul id = "list"><li>Java</li><li>JavaScript</li></ul><input id="btn" type="button" value="復制"/></body> </html>

替換元素

A.replaceChild(new, old); //A父元素,new 表示新子元素,old表示舊子元素 <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){//獲取 body 中第一個元素var ofirst = document.querySelector("body *:first-child");//獲取二個文本框var otag = document.getElementById("tag");var otxt = document.getElementById("txt");//根據兩個文本框創建一個新節點var onewtag = document.createElement(otag.value);var onewtxt = document.createTextNode(otxt.value);onewtag.appendChild(onewtxt);document.body.replaceChild(onewtag,ofirst);}}</script></head><body><p>Java</p><p>JavaScript</p><hr/>輸入標簽: <input id="tag" type="text" /><br/>輸入內容: <input id="txt" type="text" /><br/><input id="btn" type="button" value="替換"/></body> </html>

替換元素，必須提供三個節點: 父元素，新元素和舊元素

DOM 進階

HTML 屬性操作

獲取HTML 屬性值

獲取 HTML 元素的屬性值，一般通過屬性名，來找到該屬性對應的值

obj.attr /* obj 是元素名，是 DOM 的一個對象，即 getElementById()、getElementsByTagName()等方法獲取到的元素節點 attr是屬性名，對于對象來說，通過點運算符(.)來獲取它的屬性值 */

獲取靜態 HTML 中的屬性值

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");obtn.onclick = function(){alert(obtn.id);};}</script></head><body><input id="btn" class="myBtn" type="button" value="獲取" /></body> </html>

獲取動態 DOM 中的屬性值

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){//動態創建一個按鈕var oinput = document.createElement("input");oinput.id = "submit";oinput.type = "button";oinput.value = "提交";document.body.appendChild(oinput);//為按鈕添加事件oinput.onclick = function(){alert(oinput.id);}}</script></head><body></body> </html>

獲取文本框的值

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");obtn.onclick = function(){var otxt = document.getElementById("txt");alert(otxt.value);};}</script></head><body><input id="txt" type="text" /><input id="btn" type="button" value="獲取" /></body> </html>

獲取單選框的值

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");var ofruit = document.getElementsByName("fruit");obtn.onclick = function(){for(var i = 0; i < ofruit.length; i++)if(ofruit[i].checked)alert(ofruit[i].value);};}</script></head><body><div><label><input type="radio" name="fruit" value="蘋果" checked="true"/>蘋果</label><label><input type="radio" name="fruit" value="香蕉" />香蕉</label><label><input type="radio" name="fruit" value="西瓜" />西瓜</label></div><input id="btn" type="button" value="獲取"/></body> </html>

獲取復選框的值

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");var ofruit = document.getElementsByName("fruit");obtn.onclick = function(){var str = "";for(var i = 0; i < ofruit.length; i++)if(ofruit[i].checked)str += ofruit[i].value;alert(str);};}</script></head><body><div><label><input type="checkbox" name="fruit" value="蘋果" />蘋果</label><label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label><label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label></div><input id="btn" type="button" value="獲取"/></body> </html>

獲取下拉菜單的值

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>window.onload = function(){var obtn = document.getElementById("btn");var oselect = document.getElementById("select");obtn.onclick = function(){alert(oselect.value);};}</script></head><body><select id="select"><option value="北京">北京</option><option value="上海">上海</option><option value="廣州">廣州</option><option value="深圳">深圳</option><option value="杭州">杭州</option></select><input id="btn" type="button" value="獲取"/></body> </html>

設置 HTML 屬性值

obj.attr="值";

HTML 屬性操作

getAttribute()

getAttribute 獲取元素的某個屬性值

obj.getAttribute("attr") //obj 元素名; attr 屬性名

setAttribute()

setAttribute 設置元素的某個屬性值

obj.setAttribute("attr", "值");

removeAttribute()

removeAttribute 刪除元素的某個屬性

obj.removeAttribute("attr");

hasAttribute()

obj.hasAttribute("attr") <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.main{color: red; font-weight: bold;}</style><script>window.onload = function(){var op = document.getElementsByTagName("p");var obtnadd = document.getElementById("btn_add");var obtnremove = document.getElementById("btn_remove");//添加 classobtnadd.onclick = function(){op[0].className = "main";};//刪除 classif(op[0].hasAttribute("class")){obtnremove.onclick = function(){op[0].removeAttribute("class");};}}</script></head><body><p class="main">Hello World!</p><input id="btn_add" type="button" value="添加樣式" /><input id="btn_remove" type="button" value="刪除樣式" /></body> </html>

CSS 屬性操作

獲取 CSS 屬性值

getComputedStyle()：獲取一個 CSS 屬性的取值

getComputedStyle(obj).attr; <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 100px;height: 100px;background-color: hotpink;}</style><script>window.onload = function(){var obtn = document.getElementById("btn");var obox = document.getElementById("box");obtn.onclick = function(){alert(getComputedStyle(obox).backgroundColor);};}</script></head><body><input id="btn" type="button" value="獲取顏色" /><div id="box"></div></body> </html>

設置 CSS 屬性值

style 對象來設置一個 CSS 屬性的值

obj.style.attr = "值";

obj 是 DOM 對象，attr 表示 CSS 屬性名；obj.style.attr 等價于 obj.style[“attr”]

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">#box{width: 100px;height: 100px;background-color: hotpink;}</style><script>window.onload = function(){var obtn = document.getElementById("btn");var obox = document.getElementById("box");obtn.onclick = function(){//獲取 2 個文本框的值(也就是輸入的內容)var attr = document.getElementById("attr").value;var val = document.getElementById("val").value;obox.style[attr] = val;};}</script></head><body>屬性: <input id="attr" type="text" /><br />取值: <input id="val" type="text" /><br /><input id="btn" type="button" value="設置" /><div id="box"></div></body> </html>

cssText 同時設置多個 CSS 屬性

obj.style.cssText="值"; <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.oldBox{width: 100px;height: 100px;background-color: hotpink;}.newBox{width: 50px;height: 50px;background-color: lightblue;}</style><script>window.onload = function(){var obtn = document.getElementById("btn");var obox = document.getElementById("box");var cnt = 0;obtn.onclick = function(){if(cnt%2 == 0) obox.className = "newBox";else obox.className = "oldBox";++cnt;};}</script></head><body><input id="btn" type="button" value="切換" /><div id="box" class="oldBox"></div></body> </html>

obj.style.attr 只可以獲取 style 屬性中設置的 CSS 屬性，對于內部樣式或者外部樣式，是沒有辦法獲取的
getComputedStyle() ：獲取計算后的樣式，就是不管是內部樣式還是行內樣式，最終獲取的是根據 CSS 優先級計算后的結果
obj.style.backgroundColor 中，backgroundColor 其實也是一個變量，變量中是不允許出現中劃線，中劃線在 JavaScript 中是減號的意思

DOM 遍歷

查找父元素

obj.parentNode <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">table{border-collapse: collapse;}table, tr, td {border: 1px solid gray;}</style><script>window.onload = function(){var otd = document.getElementsByTagName("td");//遍歷每一個 td 元素for(var i = 0; i < otd.length; i++){//為每一個 td 元素添加點擊事件otd[i].onclick = function(){//獲取當前 td 的父元素(即 tr)var oParent = this.parentNode;//為當前 td 的父元素添加樣式oParent.style.color = "pink";oParent.style.backgroundColor = "red";};}}</script></head><body><table><caption>考試成績表</caption><tr><td>小明</td><td>80</td><td>90</td><td>88</td></tr><tr><td>小紅</td><td>88</td><td>90</td><td>99</td></tr></table></body> </html>

查找子元素

childNodes：獲取的是所有的子節點，包括元素節點和文本節點，開發不常用
children：獲取的是所有的元素節點，不包括文本節點
firstChild：開發不常用
firstElementChild：獲取的是第一個子元素節點
lastChild：開發不常用
lastElementChild：獲取的是最后一個子元素節點

查找兄弟元素

previousSibling：查找前一個兄弟節點
nextSibling：查找最后一個兄弟節點
previousElementSibling：查找前一個兄弟元素節點
nextElementSibling：查找后一個兄弟元素節點

innerHTML && innerText

innerHTML：獲取和設置一個元素的內部元素
innerText：獲取和設置一個元素的內部文本

HTML 代碼innerHTMLinnerText

<div>學習網</div>	學習網	學習網
<div><em>學習網</em></div>	<em>學習網</em>	學習網
<div><em></em></div>	<em></em>	空字符串

總結

以上是生活随笔為你收集整理的JavaScript DOM 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Pytorch和Torch和torchv
下一篇：拟一维喷管流动的数值解——全亚声速等熵喷