原生JS节点操作
获取子节点
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
原生JS节点操作的更多相关文章
- JS节点操作(JS原生+JQuery)
JavaScript与JQuery节点操作 节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...
- js节点操作实例
写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...
- 使用原生js来操作对象dom的class属性
之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对d ...
- js节点操作
在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...
- 原生JS一些操作
很久没写原生的JS了,上周做了一个小东西让我又重新了解了一下原生JS,以下记录一些常见的原生JS var canvArrow = document.getElementById('js-canv_ar ...
- js原生的节点操作API
// yi获取元素节点 //一 :过id的方式( 通过id查找元素,大小写敏感,如果有多个id只找到第一个) document.getElementById('div1'); // 通过类名查找元素, ...
- JavaScript原生的节点操作
前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下. 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持.不包含文本节点. 注意:在IE中 ...
- js 节点操作
添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id=& ...
- 原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 【学习总结】Git学习-参考廖雪峰老师教程六-分支管理
学习总结之Git学习-总 目录: 一.Git简介 二.安装Git 三.创建版本库 四.时光机穿梭 五.远程仓库 六.分支管理 七.标签管理 八.使用GitHub 九.使用码云 十.自定义Git 期末总 ...
- 【学习总结】Master课程 之 虚拟化与云计算
Section 1- Cloud Computing Introduction-云计算介绍 1-What can Cloud Computing do? - 云计算可以做什么? 服务模式:美国国家标准 ...
- Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from https://repo.maven.apache.org/maven2 was cached in the local repository, resolution will not be reattempted until the update interval o
pom.xml报错: Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from https://repo.maven.apach ...
- C# 和 c++的语法不同点
GC Garbage Collection 垃圾回收器 自动释放资源 关键字: new 1.创建对象 2.隐藏从父类继承的同名函数 using 1.引用命名空间 2. using(FileStrea ...
- # 【Python3练习题 003】一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？
# -------------------------------------------------## 所谓的“完全平方数”,就是开完根号仍然是整数.## 数学渣是这么思考的:假设这个数 i 在1 ...
- npm install、npm install --save与npm install --save-dev区别
npm install X: 会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时,不会自动安装X npm install X –sav ...
- 进阶开发——文档，缓存，ip限速
一.文档自动化管理 1.django rest framework提供了一个接口: 可以将代码中注释转换为文档中内容(list,create等),以及help_text等等,且会生成JavaScrip ...
- 定义一个内核panic问题
出现问题时的反汇编为: /usr/src/debug/kernel-4.1.44-.aarch64/net/core/dev.c: 17800xffff800000860724 <__netif ...
- java.lang.AbstractMethodError: org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()Ljava/lang/Integer; at org.apache.ibatis.executor.SimpleExecutor.prepareStatement(SimpleExecutor.jav
在整合spring和mybatis在执行数据库操作的时候报出了: java.lang.AbstractMethodError: org.mybatis.spring.transaction.Sprin ...
- 小米Note3 MIUI9可以用的XPosed框架
资源来自论坛里的:http://www.miui.com/thread-6449305-1-1.html 首先需要刷入TWRP,资源在这个帖子里:http://www.miui.com/thread- ...