JavaScript DOM_ZenDei技術網路在線

JavaScript DOM

-Advertisement-

DOM節點整個文檔是一個文檔節點整個文檔是一個文檔節點每個HTML元素是元素節點每個HTML元素是元素節點 HTML元素內的文本是文本節點 HTML元素內的文本是文本節點每個HTML屬性是屬性節點每個HTML屬性是屬性節點註釋是註釋節點註釋是註釋節點 HTML DOM節點數 HTML ...

DOM節點

整個文檔是一個文檔節點

每個HTML元素是元素節點

HTML元素內的文本是文本節點

每個HTML屬性是屬性節點

註釋是註釋節點

HTML DOM節點數

HTML DOM將HTML文檔視為數結構，這種結構被稱為節點數

通過HTML DOM，樹中的所有節點均可通過JavaScript進行訪問，所有HTML元素(節點)均可被修改，也可以創建或刪除節點

節點父，子和同胞

在節點數中，頂端節點被稱為根元素(root) 每個節點都有父節點，除了根一個節點可擁有任意數量的子節點同胞擁有相同的父節點

<html>
    <head>
        <title>標題</title>
    </head>
    <body>
        <h1>題目</h1>
        <p>內容</p>
    </body>
</html>

<html>節點沒有父節點，所以他是根節點 <head>和<body>的父節點是<html>節點文本節點"內容"的父節點是節點 <html>擁有兩個子節點：<head>和<body> <head>節點擁有一個子節點：<title>節點 <title>節點擁有一個子節點：文本節點"標題" <h1>和節點是同胞節點，同時也是<body>的子節點 <head>元素是<html>元素的首個子節點 <body>元素是<html>元素最後一個子節點 <h1>元素是<body>元素的首個子節點 元素是<body>元素最後一個子節點 HTML DOM方法

createAttribute()創建屬性節點

createElement()創建元素節點

creteTextNode()創建文本節點

appendChild()把新節點添加到指定節點

insertBefore()在指定的子節點前面插入新的子節點

removeChild()刪除子節點

replaceChild()替換子節點

getAttribute()返回指定的屬性值

setAttribute()把指定屬性設置或修改為指定的值

HTML DOM屬性

innerHTML 獲取節點的文本值

innerHTML屬性對於獲取或替換HTML元素的內容很有用

parentNode 獲取節點的父節點

childNodes 獲取節點的子節點

attributes 獲取節點的屬性節點

firstChild返回第一個子節點

內容 元素節點 var d = document.getElementById("p") d.nodeType //1 d.nodeName //P d.nodeValue //null 屬性節點 var d = document.getElementById("p").getAttributeNode("name") d.nodeType //2 d.nodeName //name d.nodeValue //kang 文本節點 var d = document.getElementById("p").firstChild d.nodeType //3 d.nodeName //#text d.nodeValue //內容 HTML DOM訪問

getElementById()獲取指定ID的元素

文本 docuemt.getElementById("xiu")

getElementsByTagName()獲取指定標簽名稱的所有元素

文本 document.getElementsByTagName("p")

getElementsByClassName()獲取指定類名的所有元素

文本 document.getElementsByClassName("xiu")[0] HTML DOM 修改

創建HTML內容

內容 document.getElementById("p").innertHTML = "修改內容"

改變HTML樣式

內容 document.getElementById("p").style.color = "red"

創建新的HTML元素

var xiu = document.createElement("p") //創建p標簽 var kang = document.createTextNode("內容") //創建文本內容 xiu.appendChild(kang) //將文本內容添加到p標簽

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

jQuery Ajax

測試jQuery模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Ajax</title>  <script src="https://code.j ...
隨機線條特效

還記得是去年的時候，查資料時偶然點進了一位名叫馬開東的大佬的博客，不禁為他的博客特效所吸引。正好當時在找模板，於是想著在註冊、登陸頁面用上這種特效。先是查看了一下網頁源碼把所有js，css鏈接點了一遍，弄下來試了一遍發現沒有用後，於是加了博客旁的一個qq群，但問了一下沒人理我，於是一氣之下退了群，關 ...
web文件上傳的總結（二）改變Apache預設post值來提高文件上傳大小

上傳的文件大小大於2MB的解決方法 #預設apache 允許上大小2MB #技術經理-->修改apache預設配置 php.ini (授權) (1)複製 php.ini -> php1.ini (2)修改 php.ini (3)停止apache/重啟apache php.ini 生效 file_up ...
hybrid

一，hybrid是什麼，為何用hybrid？二，hybrid更新和上線流程三，hybrid和h5區別四，前端js和客戶端如何通訊？一，hybrid是什麼，為何用hybrid？ 1，文字解釋 hybrid即“混合”，即前端和客戶端的混合開發需前端開發人員和客戶端開發人員配合完成某些環節也可 ...
JS實現圖片base64轉blob對象，壓縮圖片，預覽圖片，圖片旋轉到正確角度

base64轉blob對象壓縮圖片圖片預覽詳細圖片預覽可參考地址：《搞清Image載入事件(onload)、載入狀態(complete)後，實現圖片的本地預覽，並自適應於父元素內(完成)》圖片旋轉到正確的角度（驗證可行）參考地址： file上傳圖片，base64轉換、壓縮圖片、預覽圖片、將 ...
獲取用戶精準地理位置信息（百度地圖）

獲取用戶精準地理位置信息步驟： 1.通過 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法獲取經緯度； 2.使用百度地圖坐標轉換介面（http://api.map.baidu.com/geoconv/v1/?c ...
百度前端學院-基礎學院-第四課

今天是第四天，進度可以，表揚一下自己。今天的課程目標是：掌握 CSS 稍微複雜的一些選擇器，還有背景，邊框等一些 CSS 樣式屬性。 CSS背景：背景色：background-color:gray; 背景圖：background-image:url(www.......); 背景顏色漸變：背景 ...
微信小程式發現之旅（一）—— 項目搭建與頁面跳轉

開發微信小程式需要註冊一個小程式賬號，具體流程可以參照官方教程： https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 開通賬戶之後，在 “開發設置” 中獲取到 AppID，然後打開開發工具創建項目一、創建項目創建項目的時候，建議把 AppId ...