获取子节点

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. CodeIgniter框架中尝试使用swoole

    ci框架版本:3.1.7.     swoole版本:1.7.      php版本:5.6 相关文档: 以cli方式运行ci框架 swoole官方手册 创建一个TestSwoole和Hello控制器 ...

  2. STL 序列容器

    转自时习之 STL中大家最耳熟能详的可能就是容器,容器大致可以分为两类,序列型容器(SequenceContainer)和关联型容器(AssociativeContainer)这里介绍STL中的各种序 ...

  3. Sigma Function

    做完这道题,我明白了人生的一个巨大道理,那就是: 其他题研究两下,做出来几百行.数论码字前研究半天,做出来十几二十行.做完特别没有成就感... 首先说下这题题意:首先,定义一个函数f[n],即为他所有 ...

  4. CentOS7安装k8s

    借鉴博客:https://www.cnblogs.com/xkops/p/6169034.html 此博客里面有每个k8s配置文件的注释:https://blog.csdn.net/qq_359048 ...

  5. Day 4-10 logging模块

    很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,loggin ...

  6. 剑指offer(20)二叉搜索树与双向表

    题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 思路一:递归法 1.将左子树构造成双链表,并返回链表头节点. 2.定位至左子 ...

  7. python之路--管道, 事件, 信号量, 进程池

    一 . 管道 (了解) from multiprocessing import Process, Pipe def f1(conn): # 管道的recv 里面不用写数字 from_main_proc ...

  8. 设计模式笔记:简单工厂模式(Simple Factory)

    1. 简单工厂模式简介 1.1 定义 简单工厂模式:定义一个Factory类,可以根据参数的不同返回不同类的实例,被创建的实例通常有共同的父类. 简单工厂模式:只需要一个Factory类. 简单工厂模 ...

  9. Yii2控制台命令

    Yii2控制台表格输出: 例如: $in_sheet_number_queue = []; $wms_material_in_sheet_list = \core\models\WmsMaterial ...

  10. 百度云虚拟主机配置 Thinkphp5.1

    材料 服务器:百度云虚拟主机(nginx+php7.0+linux) Thinkphp 5.1 问题 百度云默认目录为/webroot,但是我们的需求是将项目存放到/webroot/public下面. ...