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 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
实例分析javascript中的异步
Jun 02 Javascript
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
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
Javascript 面向对象特性
2009/12/28 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
如何正确理解javascript的模块化
2017/03/02 Javascript
如何编写jquery插件
2017/03/29 jQuery
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python 读写中文json的实例详解
2017/10/29 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
模范教师事迹材料
2014/02/10 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
合伙协议书范本
2014/04/21 职场文书
婚前财产协议书范本
2014/10/19 职场文书
初中英语教学随笔
2015/08/15 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
tensorflow中的数据类型dtype用法说明
2021/05/26 Python