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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
JS实现十分钟倒计时代码实例
Oct 18 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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不使用copy()函数复制文件的方法
2015/03/13 PHP
php算法实例分享
2015/07/14 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python基于locals返回作用域字典
2020/10/17 Python
python音频处理的示例详解
2020/12/23 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
上班离岗检讨书
2014/01/27 职场文书
数学国培研修感言
2014/02/13 职场文书
人事专员的岗位职责
2014/03/01 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
好媳妇事迹材料
2014/12/24 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS