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 相关文章推荐
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
ant design vue的form表单取值方法
Jun 01 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
海贼王:最美的悬赏令!
2020/03/02 日漫
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php四种基础算法代码实例
2013/10/29 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
详解angular element()方法使用
2017/04/08 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
gulp解决跨域的配置文件问题
2017/06/08 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python实现简单爬虫功能的示例
2016/10/24 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
如何整合JQuery和Prototype
2014/01/31 面试题
简历上的自我评价怎么写
2014/01/28 职场文书
和睦家庭事迹
2014/05/14 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android