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 相关文章推荐
js判断输入是否为数字的具体实例
Aug 03 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
Vue实现星级评价效果实例详解
Dec 30 Javascript
JS函数本身的作用域实例分析
Mar 16 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中的float类型使用说明
2010/07/27 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
三种Webpack打包方式(小结)
2018/09/19 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
node后端服务保活的实现
2019/11/10 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
python 6种方法实现单例模式
2020/12/15 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
旅游网创业计划书
2014/01/31 职场文书
小学生学习感言
2014/03/10 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
高中运动会广播稿
2015/08/19 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
创业计划书之酒厂
2019/10/14 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Python find()、rfind()方法及作用
2022/12/24 Python