获取子节点

1. children 不是标准的dom属性，但是几乎被所有浏览器支持。获取子元素的元素节点（只包括元素节点）

注意：在IE中，children包含注释节点。

2. childNodes 是标准属性。返回所有子节点。包括文本节点。

注意：

　（1）nodeType   返回节点类型的值，一般是整数

　　     常用的有： nodeType==1是元素节点(element)，2是属性节点(attr)，3是文本节点(#text)，8是注释节点(#comment)，9是文档(document) 。

　（2）nodeName  标签的名称，返回的结果都是大写

　（3）nodeValue  返回value，但是只对文本节点和注释有用,对于标签没有作用。

<ul id="ul1">

    <li>

        <span>我是文本</span>

    </li>

    <li></li>

    <li></li>

</ul>
window.onload=function(){

    var oUl1=document.getElementById("ul1");

    console.log("children.length",oUl1.children.length); //

    console.log("childNodes.length",oUl1.childNodes.length); //

    for(var i=0; i<oUl1.children.length; i++){

       oUl1.children[i].style.background='red';

    }

}

childNodes模拟children

function myChildren(ele){

    //获取所有的子元素(包括文本节点、元素节点、注释节点)；

    var eleChild = ele.childNodes;

    var str = [];

    //循环所有的文本节点，以便都能拿到；

    for(var i = 0;i<eleChild.length;i++){

        //nodeType == 1 是元素节点(element)，2是属性节点(attr)，3是文本节点(text)，8是注释节点，9是文档(document)。

        if(eleChild[i].nodeType == 1){

            //将得到的每一项子元素添加到数组的后面；

            str.push(eleChild[i]);

        }

    }

    return str;

}

//childNodes模拟children

function myChildren2(ele){

    //获取所有的子元素(包括文本节点、元素节点、注释节点)；

    var eleChild = ele.childNodes;

    //循环所有的文本节点，以便都能拿到；

    for(var i = 0;i<eleChild.length;i++){

        //console.log(eleChild[i].nodeName);    //#text  Li

        if(eleChild[i].nodeName == "#text" && !/\S/.test(eleChild[i].nodeValue)) {

            //删除数组中的text

            ele.removeChild(eleChild[i]);

        }

    }

    return eleChild;

}

 

移除节点

removeChild

获取父节点

parentNode：获取父元素

parentNode-原生js仿jquery中的sibling方法

<body>

<ul>

    <li id="firstId">

        <span>我是文本</span>

    </li>

    <li></li>

    <li></li>

</ul>

</body>

<script type="text/javascript">

window.onload=function(){

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

   const elm=mySiblings(firstId);

   for (let i = 0; i < elm.length; i++) {

      elm[i].style.background="red";

   }

}

function mySiblings(elm) {

  var siblingsNodes = [];

  var p = elm.parentNode.children;

  for(let i =0,pl= p.length;i<pl;i++) {

    if(p[i] !== elm) siblingsNodes.push(p[i]);

  }

  return siblingsNodes;

}

</script>

插入节点

1.insertBefore

2.appendChild

创建DOM结构

1.创建元素节点 createElement

2.创建文本节点 createTextNode

document.createElement('div')

document.createTextNode('ok')

获取元素的下一个节点（同胞）

nextSibling

获取元素的上一个节点(同胞)

previousSibling

源码地址：https://github.com/zuobaiquan/javascript/tree/master/%E5%8E%9F%E7%94%9FJS%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C

原生JS节点操作的更多相关文章

  1. JS节点操作(JS原生+JQuery)

    JavaScript与JQuery节点操作   节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...

  2. js节点操作实例

    写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...

  3. 使用原生js来操作对象dom的class属性

    之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对d ...

  4. js节点操作

    在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...

  5. 原生JS一些操作

    很久没写原生的JS了,上周做了一个小东西让我又重新了解了一下原生JS,以下记录一些常见的原生JS var canvArrow = document.getElementById('js-canv_ar ...

  6. js原生的节点操作API

    // yi获取元素节点 //一 :过id的方式( 通过id查找元素,大小写敏感,如果有多个id只找到第一个) document.getElementById('div1'); // 通过类名查找元素, ...

  7. JavaScript原生的节点操作

    前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下. 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持.不包含文本节点. 注意:在IE中 ...

  8. js 节点操作

    添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id=& ...

  9. 原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Django之在Python中调用Django环境

    Django之在Python中调用Django环境 新建一个py文件,在其中写下如下代码: import os if __name__ == '__main__': os.environ.setdef ...

  2. django的配置文件字符串是怎么导入的？

    写在开头: 每个APP都会有配置文件,像下代码Django等等这种的settings里面的配置导入都是字符串的,他们是怎么做的呢? MIDDLEWARE = [ 'django.middleware. ...

  3. 哈尔滨工程大学ACM预热赛

    https://ac.nowcoder.com/acm/contest/554#question A #include <bits/stdc++.h> using namespace st ...

  4. babel (三) babel polly-fill

    Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate ...

  5. liunx 运维知识三部分

    一. 用户级用户组相关 二. 文件属性和链接知识及磁盘已满故障案例 三. 通配符 四. 特殊符号 五. 基础正则 六. 扩展正则 七. sed实践 八. awk实践

  6. debug2

    调试常用功能介绍 日常java开发中实际写代码的时间并不会很多,花在整理思路,代码重构,调试bug会占用很大部分时间. 熟练掌握调试工具,了解调试相关技巧,是java开发中减少调试时间,提高效率不可或 ...

  7. Decoder is not a @Sharable handler, so can't be added or removed multiple times

    Decoder is not a @Sharable handler, so can't be added or removed multiple times final MyMessageDecod ...

  8. Linux用户权限指令, 定时任务等指令

    一. 网卡配置详解 网络配置文件: /etc/sysconfig/network 网络接口配置文件: /etc/sysconfig/network-scripts/ifcfg-INTERFACE_NA ...

  9. 从Oracle数据库中查询前几个月数据时需要注意的一些问题

    在最近的一个项目中,有一个需求就是要查询数据库中前几个月的历史数据,但是由于自己考虑不全面造成了程序的bug,现在将这一块好好作一个总结,希望以后不再犯这种很低级的错误,首先贴出查询中用到的一个子函数 ...

  10. django学习自修第一天【简介】

    1. MVC框架 MVC框架的核心思想是解耦,降低各功能之间的耦合性,方便重构代码 (1)低耦合,高内聚 (2)高可扩展性 (3)向后兼容 2. MVT框架 V(视图):核心处理,接受请求,调用模型获 ...