javascript DOM 操作總結

寫在前面，這是我本人，學習的乙個總結，供自己翻閱檢視；

html結構如下，一下所有例子均以此為基礎

id="root">123456789
class="container">2-1
href="aaa"
name="myinput">3-1a>
class="ul">
3-2class="li1">4-1li>
class="li2">4-2li>
ul>
div>
id="container2">2-2div>
class="p">2-3p>
div>

let container2= document.getelementbyid(『container2』);

第一：獲取節點：

1，firstchild：獲取父元素下的首個子節點：

用法：parent.firstchild

例如：root .firstchild;//返回：1-1 。

2，lastchild：獲取父元素下的最後乙個子節點：

用法：parent.lastchild

例如：root .lastchild;//返回：#text 空格節點。

注意：之所以返回#text是由於空格造成的（一下所有事例同理），如果把最後乙個

,和標籤放在一行，則返回：2-3

3，childnodes：獲取父元素下子節點列表：

用法：parent.childnodes

例如：root .childnodes;//返回：[text, div.container, text, div.container2, text, p.p, text]。

4，previoussibling：已知節點上乙個節點：

用法：兄弟節點.previoussibling

例如：container2 .previoussibling;//返回：#text空格節點。

注意：如果改為2-2

通過document.getelementsbyclassname 獲取節點，能獲取到（返回的是節點陣列），但是要是在使用container2 .previoussibling 返回的是：undefined；如果document.getelementsbyclassname（）[0]，再使用那方法就能獲取到想要的而不是undefined。

5，nextsibling：已知節點下乙個節點：

用法：兄弟節點.nextsibling

例如：container2 .nextsibling;//返回：#text空格節點。

注意點同previoussibling

6，parentnode：已知節點父節點：

用法：已知節點.parentnode

例如：container2 .parentnode;//返回：...

。

注意點同previoussibling

第二：節點操作

一：建立節點：

1，createelement(『元素標籤』) ，功能：建立元素標籤

例如：

let rootchild = document.createelement('div');

rootchild.innerhtml = 'createelement方法建立的';

let attr = document.createattribute('class');//建立各個屬性

attr.value = 'classname';//屬性名
rootchild.setattributenode(attr);//用setattributenode方法新增

let container = root.getelementsbyclassname('container')[0];

let rootchild = document.createelement('div');
rootchild.innerhtml = 'createelement方法建立的';
root.insertbefore(rootchild,container)//插入在container前面

1，node.replacechild(要插入的新元素，要被替換的老元素)

實現子節點的替換。返回新插入的節點

let root = document.getelementbyid('root');

let rootchild = document.createelement('div');
let rootchildtext = document.createtextnode('我是新的文字節點');
let p = root.getelementsbyclassname('p')[0];
root.replacechild(root.innertext,p)

1，要被轉殖的節點 . clonenode(true/false);其中，true 表示 複製當前節點及其所有子節點；false 表示，只複製當前節點

let ul = root.getelementsbyclassname('ul')[0];

console.log(ul.clonenode(false));//返回：class="ul">
ul>
console.log(ul.clonenode(true));
//返回：class="ul">3-2class="li1">4-1li>
class="li2">4-2li>
ul>

1，node.removechild（要刪除的子節點）

let root = document.getelementbyid('root');

let p = root.getelementsbyclassname('p')[0];
root.removechild(p)//刪除p標籤

1，node.getatrribute(屬性名)，獲取元素節點指定屬性名的值；

let container = root.getelementsbyclassname('container')[0];   container.childnodes[1].getattribute('href')//返回：aaa

let container = root.getelementsbyclassname('container')[0];   container.childnodes[1].setattribute('href','bbb')//返回：bbb(這是改變)

----------------------------------------
container.childnodes[1].setattribute('type','ccc')//返回：ccc(這是設定新增)

container.childnodes[1].removeatrribute('href')// 刪除屬性

let root = document.getelementbyid('root');

root.childnodes[0].insertdata('2','string')//返回：12string3456789
root.childnodes[0].deletedata('1','1')//13456789
root.childnodes[0].replacedata('2','2','string')//12string56789

javascript DOM基本操作

1.用指定id選取元素 document.getelementbyid id div div document.getelementbyid div 2.用指定名字選取元素 document.getelementsbyname 一些html元素擁有name屬性 比如 和等 非唯一，所以多個元素可能有...

JavaScript DOM節點操作總結

節點型別主要有三種 元素節點，屬性節點和文字節點。而對dom的主要也就是圍繞元素節點和屬性節點的增刪改查。下面就分別從對元素節點的操作和對屬性節點的操作來介紹。在對dom進行增刪改之前，首先要找到對應的元素。具體的查詢方法如下 getelementbyid 得到單個節點 getelementsbyt...

JavaScript DOM之表單操作

dom 表單操作 以document物件中forms屬性來獲取當前html頁面所有表單集合 以document物件中表單的name屬性值來獲取表單元元素 以htmlformelement物件的elements屬性來獲取表單元件的集合 以htmlelement物件和htmltextareaelemen...