---DOM篇

時間 2019-11-16

標籤 dom 欄目 HTML 简体版

原文原文鏈接

DOM

Q：什麼是DOM？
A:(Document Object Model,文檔對象模型,JS能夠經過DOM來操做HTML結構；在DOM中，全部事物都是節點javascript

DOM樹

DOM將HTML理解爲樹形結構，基本HTML轉換爲DOM視角以下(已省略部份內容)html

<html>
    <head>
        <title>"文檔標題"</title>
    </head>
    <body>
        <a href="#">個人連接</a>
        <h1>個人標題</h1>
    </body>
</html>
複製代碼

DOM節點類型

DOM節點類型:node_type
   Element節點:1
   Text節點:3
   Document節點:9
   DocumentFragment節點:11
複製代碼

原生JS操做DOM

新增DOM

var title = document.createElement('h2');
var list = document.createTextNode('this is a test');
//將新建立的節點掛在DOM樹上
title.appendChild(list);
document.body.appendChild(title);
複製代碼

查找DOM

var id = document.getElementById("test");   //查找單個元素

var cls = document.getElementsByClassName("test");   //返回多個元素

var tag = document.getElementsByTagName("p");   //返回多個元素

//如下兩種方式傳入的是CSS選擇器
var q1 = document.querySelector("#id"); //返回查詢到的第一個元素

var q2 = document.querySelectorAll("li");   //返回多個元素
複製代碼

這裏簡單說下查詢多個元素時返回的HTML Collection對象，它會隨着DOM的改變而動態變化；內部數據是按照獲取順序排列的；能夠使用[index]來獲取對應內容，length屬性來獲取長度(只讀)java

刪除元素

var h1 = document.createElement('h1')
document.body.append(h1)

var h1 = documentSelectorAll('h1')
document.body.removeChild(h1)
h1.parentNode.removeChild(h1)
複製代碼

DOM對象的屬性和方法

r = document.getElementById('aa');

r.textContent   //"Hello World!" 文本內容
r.className     //class屬性
r.classList     //返回一個列表，可經過add等方法操做
 r.classList.add('xxx');
 r.classList.remove('xxx');
複製代碼

相關標籤/搜索

每日一句

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