javascript DOM 操作总结

写在前面，这是我本人，学习的一个总结，供自己翻阅查看；

html结构如下，一下所有例子均以此为基础
<div id="root">123456789
<div class="container">2-1
<a href="aaa" name="myInput">3-1</a>
<ul class="ul">
3-2
<li class="li1">4-1</li>
<li class="li2">4-2</li>
</ul>
</div>
<div id="container2">2-2</div>
<p class="p">2-3</p>
</div>

let Root = document.getElementById(‘root’);

let Container2= document.getElementById(‘container2’);

第一：获取节点：

1，firstChild：获取父元素下的首个子节点：

用法：parent.firstChild

例如：Root .firstChild;//返回：1-1 。

2，lastChild：获取父元素下的最后一个子节点：

用法：parent.lastChild

例如：Root .lastChild;//返回：#text 空格节点。

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

</div>,和<p>

标签放在一行，则返回：

<p class="p">2-3</p></div>

3，childNodes：获取父元素下子节点列表：

用法：parent.childNodes

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

4，previousSibling：已知节点上一个节点：

用法：兄弟节点.previousSibling

例如：Container2 .previousSibling;//返回：#text空格节点。

注意：如果改为

<div class="container2">2-2</div>

通过document.getElementsByClassName 获取节点，能获取到（返回的是节点数组），但是要是在使用Container2 .previousSibling 返回的是：undefined；如果document.getElementsByClassName（）[0]，再使用那方法就能获取到想要的而不是undefined。

5，nextSibling：已知节点下一个节点：

用法：兄弟节点.nextSibling

例如：Container2 .nextSibling;//返回：#text空格节点。

注意点同previousSibling

6，parentNode：已知节点父节点：

用法：已知节点.parentNode

例如：Container2 .parentNode;//返回：

<div id="root">...</div>

。

注意点同previousSibling

第二：节点操作

一：创建节点：

1，createElement(‘元素标签’) ，功能：创建元素标签

例如：

let RootChild = document.createElement('div');
RootChild.innerHTML = 'createElement方法创建的';
Root.appendChild(RootChild)

2，createAttribute(‘元素属性’)，功能：创建元素属性

接上面的例子继续：为新建的div标签 添加个class，名字为：className

let attr = document.createAttribute('class');//创建各个属性
attr.value = 'className';//属性名
RootChild.setAttributeNode(attr);//用setAttributeNode方法添加

3，createTextNode(‘文本内容’)，功能：创建文本节点

let RootChildText = document.createTextNode(‘我是新的文本节点’);

二：插入节点：

1，已知元素.appendChild(元素标签)，插入到子元素列表的末尾；

2，已知元素.insertBefore(元素标签)，插入到已知子元素列表的前面；

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));//返回：<ul class="ul"></ul>
console.log(UL.cloneNode(true));
//返回：<ul class="ul">3-2<li class="li1">4-1</li><li class="li2">4-2</li></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(属性名，属性值)，获取或改变元素节点的属性

let Container = Root.getElementsByClassName('container')[0];   Container.childNodes[1].setAttribute('href','bbb')//返回：bbb(这是改变)
----------------------------------------
Container.childNodes[1].setAttribute('type','ccc')//返回：ccc(这是设置添加)

3，node.removeAtrribute(属性名)，删除元素节点指定属性；

Container.childNodes[1].removeAtrribute('href')// 删除属性

四：文本操作

1，insertData(offset,string)；从offset指定的位置插入string

2，appendData(string)；將string插入到文本节点的末尾处

3，deleteData(offset,count)；从offset起删除count个字符

4，replaceData(offset,count,string)；从offset将count个字符用string代替

以下是使用例子：

let Root = document.getElementById('root');
Root.childNodes[0].insertData('2','string')//返回：12string3456789
Root.childNodes[0].appendData('string')//123456789string
Root.childNodes[0].deleteData('1','1')//13456789
Root.childNodes[0].replaceData('2','2','string')//12string56789