寫在前面,這是我本人,學習的乙個總結,供自己翻閱檢視;
let root = document.getelementbyid(『root』);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方法建立的';
2,createattribute(『元素屬性』),功能:建立元素屬性
接上面的例子繼續:為新建的div標籤 新增個class,名字為:classname
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
2,node.setattribute(屬性名,屬性值),獲取或改變元素節點的屬性
3,node.removeatrribute(屬性名),刪除元素節點指定屬性;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...