JS中DOM及其基礎操作

dom:document object model 文件物件模型，提供一些屬性和方法供我們操作頁面的元素

###獲取dom元素的方法

document.getelementbyid()

[context].getelementsbytagname() 在指定上下文(容器)中，通過標籤名獲取一組元素集合

[context].getelementsbyclassname() 在指定上下文中，通過樣式雷鳴獲取一組元素集合（不相容ie6-8）

document.getelementsbyname() 在整個文件中，通過標籤的name屬性值獲取一組元素集合（在ie中只有表單元素name才能識別，所以我們一般只應用於表單元素的處理）

document.head/document.body/document.document.element 獲取頁面中head/body/html三個元素

[context].queryselector([selector])在指定上下文中，通過選擇器獲取到指定的元素物件

[context].queryselectorall([selector])在指定上下文中，通過選擇器獲取到指定的元素集合

let box = document.queryselector(』#box』);

let links = box.queryselectorall(『a』);

//let links = document.queryselector(』#box a』)

節點：node(頁面中所有的東西都是節點)

節點集合：nodelist(getelementsbyname/queryselectorall獲取的都是節點集合)

1.元素節點（元素標籤）

nodetype（節點型別）：1

nodename：大寫的標籤名

nodevalue（標籤內容）：null

2.文字節點

nodetype（節點型別）：3

nodename: 『#text』

nodevalue（標籤內容）：文字內容

3.注釋節點

nodetype（節點型別）：8

nodename: 『#commen』

nodevalue（標籤內容）：注釋內容

4.文件節點document

nodetype（節點型別）：9

nodename: 『#document』

nodevalue（標籤內容）：null

…

描述這些節點之間的關係屬性

childnodes：獲取所有的子節點

children：獲取所有的元素子節點（子元素標籤）

firstchild：獲取第乙個子節點

lastchild：獲取最後乙個子節點

firstelementchild/lastelementchild：獲取第乙個和最後乙個元素子節點（不相容ie6-8）

previoussibling：獲取上乙個哥哥節點

nextsibling：獲取下乙個弟弟節點

previouselementsibling/nextelementsibling：獲取哥哥和弟弟元素節點（不相容ie6-8）

removechild:移出容器中的某個元素

//轉殖

let box1 = document.queryselector('.box');
//深轉殖
let box2 = box1.clonenode(true);
box2.queryselector('span').innertext = 'xiaoyu';
//淺轉殖
let box3 = box1.clonenode(false);
box3.innerhtml = "xiaojie";
//移出
//容器.removechild(元素)
document.body.removechild(box2);

JS中DOM操作基礎（一）

事件 行為，操作 觸發事件 註冊事件 事件 響應 事件源 document.getelementbyid btn onclick function id 就像人的 身份證，是標籤在文件中的 身份位址 var btnobj document.getelementbyid btn 返回值時文件 頁面 中...

js基礎總結01 操作DOM

12 3示例注意 document.getelementsbyclassname p 等返回的是乙個htmlcollection 物件集合，document.queryselectorall p 返回的是乙個nodelist 物件集合，兩者沒有很大的不同，但要注意 訪問 htmlcollection...

Js操作 DOM操作

一 節點屬性 dom 是樹型結構，相應的，可以通過一些節點屬性來遍歷節點樹 方法說明 nodename 節點名稱，相當於tagname.屬性節點返回屬性名，文字節點返回 text。nodename，是唯讀的。nodetype 節點的型別，返回值 1，元素節點 2，屬性節點 3，文字節點。nodety...