首頁 >web前端 >js教程 >原生js 操作dom

原生js 操作dom

小云云
小云云原創
2017-12-08 16:35:311963瀏覽

本文我們將跟大家分享原生js 操作dom ,希望對大家有用。

ng-click="brandFnc($event)"$scope.brandFnc = function($event) {
    // 通过 $event.target 来获取
}
ev.target.parentElementev.target.parentElement.children[0].srcev.target.previousElementSiblingev.target.nodeNameconsole.log(ev.target.outerHTML);//<button ng-click="ngGetSrc($event)">获取src</button>---整个console.log(ev.target.innerHTML);//获取src--中间的内容原生js的方法:1)创建节点:createElement创建元素,
也可以使用createTextNode创建文本节点.
document.body指向的是<body>元素;document.documentElement则指向<html>元素
    //创建节点
    var createNode = document.createElement("p");
    var createTextNode = document.createTextNode("hello world");
    createNode.appendChild(createTextNode);
    document.body.appendChild(createNode);
    document.documentElement.appendChild(createNode);2)插入节点:appendChild,insertBefore,
insertBefore接收两个参数,第一个是插入的节点,第二个是参照节点,如insertBefore(a,b),则a会插入在b的前面
//插入节点
 var createNode = document.createElement("p");var createTextNode = document.createTextNode("hello world");
  createNode.appendChild(createTextNode);
 var p1 = document.getElementById("p1");
 document.body.insertBefore(createNode,p1);3)替换和删除元素,从replaceChild和removeChild的字面意思看,就是删除子节点,因此调用者,需要包含子节点p1,不然调用会报错。返回的节点是替换的或删除的元素,被替换/删除的元素仍然存在,但document中已经没有他们的位置了。
//替换元素
var replaceChild = document.body.replaceChild(createNode,p1);//删除元素
var removeChild = document.body.removeChild(p1);4)节点的属性:firstChild:第一个子节点lastChild:最后一个子节点childNodes:子节点集合,获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点
parentNode:父节点
<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>
复制代码
   //节点属性
    var ul = document.getElementById("ul");
    var firstChild = ul.firstChild;
    console.log(firstChild.innerHTML);
    var lastChild = ul.lastChild;
    console.log(lastChild.innerHTML);
    var length = ul.childNodes.length;
    console.log(length);
    var secondChild = ul.childNodes.item(1);
    console.log(secondChild.innerHTML);
    var forthChild = ul.childNodes.item(2).nextSibling;
    console.log(forthChild.innerHTML);
    var thridChild = forthChild.previousSibling;
    console.log(thridChild.innerHTML);
    var parentNode = forthChild.parentNode;
    console.log(parentNode.innerHTML);5) 文档片段,好处在于减少dom的渲染次数,可以优化性能。
//文本片段
    var fragment = document.createDocumentFragment();
    var ul = document.getElementById("ul");
    var li = null;
    for (var i = 4; i >= 0; i--) {
        li = document.createElement("li");
        li.appendChild(document.createTextNode("item "+i));
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);6)克隆元素
someNode.cloneNode(true):深度克隆,会复制节点及整个子节点
someNode.cloneNode(false):浅克隆,会复制节点,但不复制子节点 
//克隆
    var clone = ul.cloneNode(true);

    document.body.appendChild(clone);

注意:1、childNodes.length存在跨瀏覽器的問題 

#可以看到清單的html片段沒有用 

<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>

 這種書寫格式而是使用沒有換行的格式書寫,是因為在不同的瀏覽器中,取得ul.childNodes.length的結果有差異:
在ie中,ul.childNodes.length不會計算li之間的換行空格,從而得到數值為4在ff、chrome,safari中,會有包含li之間的空白符的5個文本節點,因此ul. childNodes.length為9若要解決跨瀏覽器問題,可以將li之間的換行去掉,改成一行書寫格式。
2、cloneNode存在跨瀏覽器的問題
在IE中,透過cloneNode方法複製的元素,會複製事件處理程序,比如,var b = a.cloneNode(true).若a存在click,mouseover等事件監聽,則b也會擁有這些事件監聽。

在ff,chrome,safari中,透過cloneNode方法複製的元素,只會複製特性,其他一切都不會複製
因此,若要解決跨瀏覽器問題,在複製前,最好先移除事件處理程序。

ng-click="brandFnc($event)"$scope.brandFnc = function($event) {
    // 通过 $event.target 来获取
}
ev.target.parentElementev.target.parentElement.children[0].srcev.target.previousElementSiblingev.target.nodeNameconsole.log(ev.target.outerHTML);//<button ng-click="ngGetSrc($event)">获取src</button>---整个console.log(ev.target.innerHTML);//获取src--中间的内容原生js的方法:1)创建节点:createElement创建元素,
也可以使用createTextNode创建文本节点.
document.body指向的是<body>元素;document.documentElement则指向<html>元素
    //创建节点
    var createNode = document.createElement("p");

    var createTextNode = document.createTextNode("hello world");

    createNode.appendChild(createTextNode);

    document.body.appendChild(createNode);

    document.documentElement.appendChild(createNode);2)插入节点:appendChild,insertBefore,
insertBefore接收两个参数,第一个是插入的节点,第二个是参照节点,如insertBefore(a,b),则a会插入在b的前面
//插入节点

 var createNode = document.createElement("p");var createTextNode = document.createTextNode("hello world");

  createNode.appendChild(createTextNode);

 var p1 = document.getElementById("p1");

 document.body.insertBefore(createNode,p1);3)替换和删除元素,从replaceChild和removeChild的字面意思看,就是删除子节点,因此调用者,需要包含子节点p1,不然调用会报错。返回的节点是替换的或删除的元素,被替换/删除的元素仍然存在,但document中已经没有他们的位置了。
//替换元素

var replaceChild = document.body.replaceChild(createNode,p1);//删除元素
var removeChild = document.body.removeChild(p1);4)节点的属性:firstChild:第一个子节点lastChild:最后一个子节点childNodes:子节点集合,获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)nextSibling:下一个兄弟节点
previousSibling:上一个兄弟节点
parentNode:父节点

<ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul>

复制代码

   //节点属性

    var ul = document.getElementById("ul");

    var firstChild = ul.firstChild;

    console.log(firstChild.innerHTML);

    var lastChild = ul.lastChild;

    console.log(lastChild.innerHTML);

    var length = ul.childNodes.length;

    console.log(length);



    var secondChild = ul.childNodes.item(1);

    console.log(secondChild.innerHTML);



    var forthChild = ul.childNodes.item(2).nextSibling;

    console.log(forthChild.innerHTML);

    var thridChild = forthChild.previousSibling;

    console.log(thridChild.innerHTML);



    var parentNode = forthChild.parentNode;

    console.log(parentNode.innerHTML);5) 文档片段,好处在于减少dom的渲染次数,可以优化性能。

//文本片段

    var fragment = document.createDocumentFragment();

    var ul = document.getElementById("ul");

    var li = null;

    for (var i = 4; i >= 0; i--) {

        li = document.createElement("li");

        li.appendChild(document.createTextNode("item "+i));

        fragment.appendChild(li);

    }

    ul.appendChild(fragment);6)克隆元素
someNode.cloneNode(true):深度克隆,会复制节点及整个子节点
someNode.cloneNode(false):浅克隆,会复制节点,但不复制子节点 
//克隆

    var clone = ul.cloneNode(true);

    document.body.appendChild(clone);注意:1、childNodes.length存在跨浏览器的问题


可以看到有关列表的html片段没有用 
<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>

 這種書寫格式而是使用沒有換行的格式書寫,是因為在不同的瀏覽器中,取得ul.childNodes.length的結果有差異:
在ie中,ul.childNodes.length不會計算li之間的換行空格,從而得到數值為4在ff、chrome,safari中,會有包含li之間的空白符的5個文字節點,因此ul.childNodes.length為9若要解決跨瀏覽器問題,可以將li之間的換行去掉,改成一行書寫格式。
2、cloneNode存在跨瀏覽器的問題
在IE中,透過cloneNode方法複製的元素,會複製事件處理程序,比如,var b = a.cloneNode(true).若a存在click,mouseover等事件監聽,則b也會擁有這些事件監聽。

在ff,chrome,safari中,透過cloneNode方法複製的元素,只會複製特性,其他一切都不會複製
因此,若要解決跨瀏覽器問題,在複製前,最好先移除事件處理程序。

相關推薦:

Js操作DOM物件的流程

jQuery中DOM操作實例分析

Js如何操作DOM及取得瀏覽器高度以及寬度

以上是原生js 操作dom的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn