全稱:文件物件模型 / document object model
作用:定義一系列標準物件，通過物件給我們提供的方法來訪問節點、操作(增刪改查)節點(html元素)，dom中一切都是物件，包含方法以及屬性。所有的操作都是從物件開始。
在dom中所有的內容都會被解析為乙個節點(物件 )，會形成乙個倒掛的樹狀圖，這是其在記憶體中的儲存方式。
節點:節點分類
節點型別共有12種,
元素節點 、 html標籤
屬性節點 、 html標籤中的屬性
文字節點 、 頁面中可以看到的內容
注釋節點 、 html中的注釋
(1\2\3常用)
節點關係
父節點/parentnode
子節點/chlidnode
第乙個子節點/fristchild
最後乙個子節點/lastchild
兄弟節點
下乙個兄弟/nextsibiling
上乙個兄弟/previoussibiling
查詢節點方法:
//1.根據id
let idhtml = document.getelementbyid("id值");
//發方法返回乙個物件，id值唯一
idhtml.innerhtml
idhtml.innertext
//獲取標籤中的內容
idhtml.innerhtml = "內容";
//修改html標籤種的內容，識別標籤
= 「這是乙個標籤
」idhtml.innertext = "內容";
//修改html標籤種的內容，不識別標籤-會把標籤都當做文字
//2.根據元素標籤
let taglist = document.getelementsbytagname("標籤名稱");
//返回節點集合物件 nodelist 可以作為唯讀陣列處理-(可以用陣列的方式，獲得某個節點)
獲得該集合該元素的個數
//存放順序為原文件中的書寫循序
let tagone = taglist[0];
//獲取當前標籤的第乙個元素節點
let tagone = document.getelementsbytagname("標籤名稱")[0];
//上述的簡寫
let tagone = document.getelementsbytagname("標籤名稱1")[0]
.getelementsbytagname("標籤名稱2")[0];
//找到標籤1下邊的標籤2元素
//操作標籤中內容同id查詢
//3.根據name屬性的值
let namelist = document.getelementsbyname("name屬性的值");
//根據元素name屬性的值來獲取元素物件的集合
//用法類似 根據元素標籤(2)尋找元素
//注意!!!!該方法主要針對表單元素來使用
//對於表單元素 name是自身屬性 對於非表單元素來說 name是自定義屬性
//對於ie瀏覽器有區別，google、火狐沒區別
//4.根據class屬性的值--推薦使用，但它具有相容性(ie不支援)
let classlist = document.getelementsbyclassname("name屬性的值");
//根據元素class屬性的值來獲取元素物件的集合
//用法類似 根據元素標籤(2)尋找元素
//相容函式-以根據class屬性查詢為例
function
mygetelementsbyclassname(clazzname)
}else
return
classlist;
}
es6中提供了兩個新的api
//1.查詢選擇器
(document||element).queryselector("css選擇器");
//接收css的選擇器，只返回與該模式匹配的第乙個匹配的元素
//如果沒有找到返回null 如果是不支援的選擇器或格式不正確會報錯
//通過document型別的呼叫方法，則在文件範圍類查詢配的元素
//通過element型別的呼叫方法，則在該元素的後代範圍類查詢配的元素
(document||element).queryselectorall("css選擇器");
//接收css的選擇器，只返回與該模式匹配的所有匹配的元素，返回乙個類陣列
//使用方法與queryselector("css選擇器")一樣
Js DOM節點屬性
在文件物件模型 dom 中，每個節點都是乙個物件。dom 節點有三個重要的屬性 1.nodename 節點的名稱 2.nodevalue 節點的值 3.nodetype 節點的型別 一 nodename 屬性 節點的名稱，是唯讀的。1.元素節點的 nodename 與標籤名相同 2.屬性節點的 no...
js DOM層次節點（一）
dom 文件物件模型 是針對html和xml文件的乙個api。dom描繪了乙個層次化的節點樹，允許開發人員新增，移除和修改頁面的某一部分。節點分為幾種不同的型別，分別表示文件中不同資訊及標記。每個節點都有各自的特點，資料等，也與其他節點存在某種關係。節點之間的關係構成了層次，所有頁面標記為乙個以特定...
JS DOM節點相關資訊，歸納詳解
1 dom獲取節點方式 aaa 1 h1 bbb 1 h1 2 p 2 p 2 p text name ccc var a document.queryselector h1 var b document.queryselectorall p b 0 p1 b 1 p2 b 2 p1 var c d...