获取子节点

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. 【问题解决方案】之 关于某江加密视频swf专用播放器仍无法播放的问题

    前言: 从pt上下载了一些语言学习的视频之后一直打不开,百度谷歌了若干种方法仍然无解.无奈放弃. 某日从百度知道里又看到一个方法,试了一下,居然灵了.呜呼哀哉.赶紧记下来. 原方法链接:https:/ ...

  2. 爬虫——selenium基础

    Selenium,自动化浏览器技术.主要用于web应用自动测试和自动完成web基本任务管理.官方网站:https://selenium-python.readthedocs.io/getting-st ...

  3. Column 'parent_id' specified twice

    Hibernate Column 'parent_id' specified twice问题解决--insertable = false, updatable = false的使用 - shendeg ...

  4. Centos 7 关闭selinux and firewall

    关闭selinx,重启生效 修改文件 /etc/selinux/config 修改 SELINUX=disabled getenforce #查selinux状态 setenforce #关闭seli ...

  5. mysql常用运算符

    一.算数运算符 + 加法 - 减法 * 乘法 / 除法 % 返回余数 二.比较运算符 = 等于 <>或!= 不等于 <=> 等于(这里是安全的等于 例如: select nul ...

  6. python之if使用方法举例

    if使用方法举例: import random #随机生成1-100的整数 n = random.randint(1, 100) if n > 50: print(n, "> 5 ...

  7. js的常用文档对象，document

    1.document的概念:window的子对象,由于DOM对象模型的默认对象就是window,因此Window对象中的方法和子对象不需要通过Window来引用. - 2.document的组成:属性 ...

  8. Create an Azure SQL database in the Azure portal

    Create a SQL database An Azure SQL database is created with a defined set of compute and storage res ...

  9. Android View相关知识问答

    Android View相关核心知识问答 Activity Window View之间的三角关系 你真的了解View的坐标吗? 在渲染前获取 View 的宽高 5种手势工具类 浅析Android的窗口

  10. 会话session

    因为因特网HTTP协议的特性,每一次来自于用户浏览器的请求(request)都是无状态的.独立的.通俗地说,就是无法保存用户状态,后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户.对于静 ...