JavaScript原生节点操作小结


Posted in Javascript onJanuary 17, 2017

前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下。

获取子节点

children 不是标准的dom属性,但是几乎被所有浏览器支持。不包含文本节点.

注意:在IE中,children包含注释节点。

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

获取第一个子节点

1.firstChild

document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild

获取最后一个子节点

1.lastChild

document.getElementById('b_pole').childNodes[0].childNodes[0].lastChild

判断是否有子节点

1.hasChildNodes()

document.getElementById('b_pole').childNodes[0].childNodes[0].hasChildNodes()

判断节点类型与节点名称

1.nodeType

    1:元素

    2:属性

    3:文本

2.nodeName

document.getElementById('b_pole').childNodes[0].childNodes[0].nodeType //1
document.getElementById('b_pole').childNodes[0].childNodes[0].nodeName //UL

创建DOM结构

1.创建元素节点 createElement

2.创建文本节点 createTextNode

document.createElement('div')
document.createTextNode('ok')

插入节点

1.insertBefore

2.appendChild

document.getElementById('b_pole').insertBefore(document.createTextNode('div'),document.getElementById('b_pole').firstChild)
document.getElementById('b_tween').childNodes[0].nextSibling.previousSibling.appendChild(document.createTextNode('ZQZQZQZQZ'))

移除节点

1.removeChild

document.getElementById('b_pole').removeChild(document.getElementById('b_pole').childNodes[0])

并返回被删除的节点dom

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

1.nextSibling

document.getElementById('b_pole').nextSibling

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

1.previousSibling

document.getElementById('b_pole').previousSibling

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
JavaScript网页制作特殊效果用随机数
May 22 Javascript
js的逻辑运算符 ||
May 31 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
VueJS全面解析
Nov 10 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
原生js实现简单轮播图
Oct 26 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
Javascript 两种刷新方法以及区别和适用范围
Jan 17 #Javascript
easyUI combobox实现联动效果
Jan 17 #Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 #Javascript
React Router基础使用
Jan 17 #Javascript
JavaScript自定义分页样式
Jan 17 #Javascript
javascript实现页面滚屏效果
Jan 17 #Javascript
javascript中递归的两种写法
Jan 17 #Javascript
You might like
德生PL990的分析评价
2021/03/02 无线电
php中转义mysql语句的实现代码
2011/06/24 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
在Windows8上的搭建Python和Django环境
2014/07/03 Python
跟老齐学Python之集合的关系
2014/09/24 Python
python图片验证码生成代码
2016/07/02 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
施工班组长岗位职责
2014/01/05 职场文书
社区包粽子活动方案
2014/01/21 职场文书
家长学校实施方案
2014/03/15 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
关于安全的广播稿
2014/10/23 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL