06-JS DOM操作

Posted 2020-11-25 戒奢从简，起早贪黑，努力提升

 

创建节点

document.write（创建任意内容，并写入）

document.write("<h1>添加到html中的文本</h1>");

 

docement.createElement（创建元素）

var jd = document.createElement("li"); //创建一个li元素

 

document.createTextNode（创建文本）

var wb = document.createTextNode("创建的文本");  //创建一个文本内容

 

document.createDocumentFragment （创建虚拟节点对象）

var fragment = document.createDocumentFragment();   //创建一虚拟的节点对象，节点对象包含所有属性和方法。

//document.createDocumentFragment()优点：说白了就是为了节约使用DOM。每隔javascript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而减少消耗的时间。为解决这个问题，可以创建一个文档碎片，把所有的新摘要附加其上，然后把文档碎片的内容一次性添加到文档中。

 

 document.createComment（创建注释）

var zhuxi = document.createComment("注释的内容");  //创建一个注释内容

 

 注：以上创建的节点需要  xx.appendChild()的方法添加到页面中。document.write除外。

 

 

 

高效创建节点

innerHTML

innerHTML：用来设置或获取当前标签的起始和结束里面的内容

html文档：<div id="dd" ><p> 321<p> </div>

script文档1：  //设置

var dd = document.getElementById("dd");
var str = "<p>文本1</p>"
+"<h1>标题节点</h1>"
+"<h2>小标题节点</h2>";
dd.innerHTML = str;         //原来div里面的元素都被替换

script文档2：  //获取

var dd = document.getElementById("dd");
console.log(dd.innerHTML);    //获取到的值为<p> 321<p>

 

 outerHTML

outerHTML：返回调用它的元素及所有子节点的HTML标签

html文档：<div id="dd" > 321 </div>

script文档1：

var dd = document.getElementById("dd");
console.log(dd.outerHTML);    //返回值<div id="dd" > 321 </div>

script文档2：

var dd = document.getElementById("dd");
dd.outerHTML = "<p> 清空原来的所有值，变成这个 </p>";    //原来的值是321。

 

 interText

interText：设置或获取位于对象起始和结束标签内的文本。

html文档：<div id="dd" ><p> 321<p> </div>

script文档： //获取目标文档

var dd = document.getElementById("dd");
console.log(dd.innerText);          //打印321

script文档2：   //设置目标文档

var dd = document.getElementById("dd");
console.log(dd.innerText);
dd.innerText = "<p> 替换原来所有的文本 </p>";     //屏幕div显示，<p> 替换原来所有的文本 </p>，p标签也会当作文档显示出来

注：火狐浏览器不支持该标签，不过有类似标签textContent

 

 outerText 与 innerText 的区别

outerText：获取文档跟innerText一样，设置不一样，如，

html文档：<div id="dd" ><p> 321<p> </div>

script文档：

var dd = document.getElementById("dd");
console.log(dd.innerText);
dd.outerText = "<p> 替换原来所有的文本 </p>";    //屏幕依然显示<p> 替换原来所有的文本 </p>，但是原来的div已经不复存在，只留下文本    <p> 替换原来所有的文本 </p>

 

 

 

父子节点查找

父节点 找 子节点

 找第一个子节点：firstChild

找最后一个子节点：lastChild

  找第n个子节点：childNodes[n-1]　　//从0开始算

  找第n个子节点：childNodes.item(n-1)　　//从0开始算 

 

子节点 找 父节点

找父节点：parentNode

 

子节点 找 兄弟节点

找下一个兄弟节点：nextSibling

找上一个兄弟节点：previousSibling

 

找文档根节点

直接查找文档的根节点：var gen = document.documentElement;

直接查找文档的根节点：var gen = p.ownerDocument;      //现在gen = document

tagName：返回属性的标签名。  //如，console.log("gen.tagName");  直接打印出根节点。

元素名.hasChildNodes();   //判断该元素是否有子节点，返回Boolean值。包括文本节点。

 

console.log(gen.children[i]); //打印出第 i+1 个节点，不包括文本节点，从0开始算

var shu =  gen.childElementCount;  //算出有多少个非文本节点的节点

 

 

 

类数组对象

类数组对象NodeList，转换成数组，再添加一个节点。

 

HTMLCollection（获取类数组对象）

var script = document.scripts;  //获取当前html里面所有的script

var links = document.links;  //返回当前html中所有的a标签链接

var cells = document.getElementById("tr").cells;  //获取当前html中，所有的td元素

var imgs = document.images;  //获取当前html中，所有的图片

var forms = document.forms;  //获取当前html中，所有的表单

var options = document.getElementById("select").options;  //获取当前html中，所有的option选项

var ps = document.getElementsByTagName("p");  //获取当前html中，的所有p标签的内容

以上的值返回的都是HTMCollection

 

类数组对象NameNodeMap

 

类数组对象的动态性

Nodelist，HTMLcollection, NamedNodeMap 三个集合都是 动态的, 是有生命、有呼吸的对象

它们实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映这些对象中

每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息

 

 

 

获取节点

IE6 到 IE8 也兼容
getElementById()
getElementsByName()
getElementsByTagName()

IE9 或以上
getElementsByClassName()
querySelector()
querySelectorAll()

 

操作节点

<ul id="abc">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>

 

appendChild() 

appendChild()  //为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。

如：要为上面ul添加一个li

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var text = document.creatTextNode(‘4’);   //创建文本节点4

var li = document.createElement(‘li’);   //创建li元素

li.appendChild(text);    //给li元素填入文本节点4

ul.appendChild(li);    //给ul元素填入刚才的li元素

 

insertBefore()  

insertBefore()  //在指定的已有节点之前插入新的子节点

如：要为上面<li>2</li>前面插入一个新节点

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var text = document.creatTextNode(‘4’);   //创建文本节点4

var lia = document.createElement(‘li’);   //创建li元素

lia.appendChild(text);    //给li元素填入文本节点4

var lib = abc.children.item(1);   //获取第二个子节点

abc.insertBefore(lia,lib);    //lia为要插入的节点，插入的位置是lib的前面，若是lib写成null，则效果跟appendChild一样。

 

replaceChild()

replaceChild(要插入的节点，被替换的节点)   //用新的节点替换某个子节点，返回值是被替换的子节点

如：要为上面<li>3</li>替换成<li>4</li>

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var text = document.creatTextNode(‘4’);   //创建文本节点4

var lia = document.createElement(‘li’);   //创建li元素

lia.appendChild(text);    //给li元素填入文本节点4

var lib = abc.children.item(2);   //获取第3个子节点

abc.replaceChild( lia,lib );   //lia是要插入的节点，lib是被替换的节点。

 

cloneNode() 

cloneNode(true/false)   //节点的拷贝，返回该副本。不填时为false，false表示只拷贝当前节点的标签元素，不拷贝子节点；true表示连同子节点一起拷贝。

如：拷贝一份ul到当前的body里面

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var clone = abc.cloneNode(true);    //连同子节点一起拷贝

document.body.appendChild(clone);     //拷贝的节点要有父节点，没有父节点的话得通过appendChild、insertBefore、replaceChild等方式进行添加

 

normalize() 

 

normalize()    //合并相邻的text节点

var div = document.creatElement(‘div’);   //创建一个div

var text = document.creatTextNode(‘123’);    //创建第一个文本节点

div.appendChild(text);     //把第一个文本节点添加到div里面

var text2 = document.creatTextNode(‘456’);    //创建第二个文本节点

div.appendChild(text2);    //把第二个文本节点添加到div里面

document.body.appendChild(div);   //在body显示div

 

 

 

//可以看见右边调试工具的文本节点有两个的

div.normalize();   //这样我们就能把两个节点合并为一个节点了

 

 

 

splitText() 

splitText()    //按照指定位置把一个文本节点分割为两个文本节点，返回新的文本节点

var div = document.creatElement(‘div’);   //创建一个div

var text = document.creatTextNode(‘123456’);    //创建一个文本节点

div.appendChild(text);     //把文本节点添加到div里面

var fen = div.firstChild.splitText(3);   //从第4个开始分割，包含第四个。

console.log(div.firstChild.nodeValue);   //控制台打印出第一个文本节点，即123

 

 

 

删除节点

<ul id="abc">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>

 

removeChild() 

removeChild()   //删除某个节点，括号必须传入要删除的节点，返回删除的节点

如：删除上面<li>1</li>节点

var  abc = document.getElementById(‘abc’);   //获取ul元素id

var del = abc.removeChild(abc.childNodes[1]);   //删除第二个节点，上面一共7个节点，7个节点里面包含空白节点

 

removeNode()

removeNode()   //ie私有，参数是布尔值，默认为false。false时只删除改节点，true时连同子节点一起删

如：删除上面的ul节点，不删子节点

var  abc = document.getElementById(‘abc’);   //获取ul元素id

var del = abc.removeNode();

如：删除上面的ul节点，连同子节点

var  abc = document.getElementById(‘abc’);   //获取ul元素id

var del = abc.removeNode(true);

 

removeChild()与innerHTML的区别

removeChild()，在ie6-8删除后还可以调用；在chrome删除后还可以调用

innerHTML，在ie6-8删除后还不可以调用；在chrome删除后还可以调用

ps：调用指的是元素对应的方法，而不是元素本身