原生js 操作dom

最新推荐文章于 2024-06-25 20:43:11 发布

haliofwu

最新推荐文章于 2024-06-25 20:43:11 发布

阅读量218

点赞数

分类专栏： js dom

本文链接：https://blog.csdn.net/xixi880928/article/details/78751437

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

dom

1 篇文章 0 订阅

订阅专栏

ng-click="brandFnc($event)"
$scope.brandFnc = function($event) {
    // 通过 $event.target 来获取
}
ev.target.parentElement
ev.target.parentElement.children[0].src
ev.target.previousElementSibling
ev.target.nodeName
console.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方法复制的元素，只会复制特性，其他一切都不会复制
因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。

haliofwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js 操作dom

ng-click="brandFnc($event)"$scope.brandFnc = function($event) { // 通过 $event.target 来获取}ev.target.parentElementev.target.parentElement.children[0].srcev.target.previousElementSiblingev.target
复制链接

扫一扫

专栏目录