찾다

집 >웹 프론트엔드 >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>

이 쓰기 형식은 It입니다. 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)). 이벤트 리스너, 그러면 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 길이가 개행 공백을 계산하지 않습니다. li 사이에 있으므로 값은 4입니다. ff, chrome 및 safari에는 li 사이에 공백이 포함된 5개의 텍스트 노드가 있으므로 ul.childNodes.length는 9입니다. 해결하려면 브라우저 간 문제인 경우 제거할 수 있습니다. li 사이에서 줄이 바뀌어 한 줄 쓰기 형식으로 변경됩니다.
2. cloneNode에 크로스 브라우저 문제가 있습니다
IE에서는 cloneNode 메소드를 통해 복사된 요소가 이벤트 핸들러를 복사합니다(예: var b = a.cloneNode(true)). 이벤트 리스너, 그러면 b도 이러한 이벤트 리스너를 갖게 됩니다.

ff, chrome 및 safari에서는 cloneNode 메서드를 통해 복사된 요소는 속성만 복사하고 다른 항목은 복사하지 않습니다. 따라서 브라우저 간 문제를 해결하려면 프로그램을 복사하기 전에 이벤트 처리를 제거하는 것이 가장 좋습니다.


관련 권장 사항:

Js가 DOM 객체를 작동하는 프로세스

jQuery의 DOM 작업 예제 분석

Js가 DOM을 작동하고 브라우저 높이와 너비를 가져오는 방법

위 내용은 네이티브 JS 작업 DOM의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js 멀티터치 문제다음 기사：js 멀티터치 문제

관련 기사

더보기