Maison >interface Web >js tutoriel >Opération js native dom

Opération js native dom

小云云original: 2017-12-08 16:35:311962parcourir

Dans cet article, nous partagerons avec vous comment faire fonctionner dom en utilisant du js natif. Nous espérons que cela sera utile à tout le monde.

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);

Remarque : 1. childNodes.length a des problèmes entre navigateurs

Vous pouvez voir les Le fragment html de la liste n'utilise pas le format d'écriture de

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

mais utilise un format sans sauts de ligne car les résultats de l'obtention de ul.childNodes.length sont différents selon les navigateurs :
Dans IE, ul.childNodes.length ne calcule pas l'espace de nouvelle ligne entre li, donc la valeur est 4. Dans ff, chrome et safari, il y aura 5 nœuds de texte contenant l'espace entre li , donc ul.childNodes. la longueur est de 9. Pour résoudre le problème entre navigateurs, vous pouvez supprimer les sauts de ligne entre li et le remplacer par un format d'écriture sur une seule ligne.
2. CloneNode a des problèmes entre navigateurs
Dans IE, les éléments copiés via la méthode cloneNode copieront le gestionnaire d'événements, par exemple, var b = a.cloneNode(true) Si a a cliqué, passez la souris sur Attendez. surveillance des événements, alors b aura également cette surveillance des événements.

Dans ff, Chrome et Safari, les éléments copiés via la méthode cloneNode ne copieront que les attributs, et rien d'autre ne sera copié
Par conséquent, pour résoudre le problème entre navigateurs, il est préférable de le faire. copier avant de copier. Il est préférable de supprimer d'abord le gestionnaire d'événements.

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>

Ce format d'écriture est écrit dans un format sans saut de ligne car dans différents navigateurs, on obtient ul.childNodes Les résultats de .length sont différents :
Dans IE, ul.childNodes.length ne calcule pas l'espace de nouvelle ligne entre li, donc la valeur est 4. Dans ff, chrome et safari, il y aura un espace entre li. Il y a 5 nœuds de texte de le symbole, donc ul.childNodes.length vaut 9. Pour résoudre le problème entre navigateurs, vous pouvez supprimer les sauts de ligne entre li et le remplacer par un format d'écriture sur une seule ligne.
2. CloneNode a des problèmes entre navigateurs
Dans IE, les éléments copiés via la méthode cloneNode copieront le gestionnaire d'événements, par exemple, var b = a.cloneNode(true) Si a a cliqué, passez la souris sur Attendez. surveillance des événements, alors b aura également cette surveillance des événements.

Dans ff, Chrome et Safari, les éléments copiés via la méthode cloneNode ne copieront que les attributs, et rien d'autre ne sera copié
Par conséquent, pour résoudre le problème entre navigateurs, il est préférable de le faire. copiez les éléments avant de copier. Il est préférable de supprimer d'abord le gestionnaire d'événements.

Recommandations associées :

Processus Js d'exploitation des objets DOM

Analyse d'exemples d'opérations DOM dans jQuery

Comment Js exploite le DOM et obtient la hauteur et la largeur du navigateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js problème multi-touchArticle suivant：js problème multi-touch

Articles Liés

Voir plus