• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript原生节点操作小结

JavaScript原生节点操作小结

作者:leslie·Zhao 字体:[增加 减小] 来源:互联网 时间:2017-05-11

leslie·Zhao通过本文主要向大家介绍了javascript删除节点,javascript获取节点,javascript创建节点,javascript 子节点,javascript 父节点等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

前言:原生是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
</div>

创建DOM结构

1.创建元素节点 createElement

2.创建文本节点 createTextNode

document.createElement('div')
document.createTextNode('ok')
</div>

插入节点

1.insertBefore

2.appendChild

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

移除节点

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript中在光标处插入添加文本标签节点的详细方法
  • JavaScript原生节点操作小结

相关文章

  • 2017-05-11微信小程序商城项目之侧栏分类效果(1)
  • 2017-05-11干货!教大家如何选择Vue和React
  • 2017-05-11bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
  • 2017-05-11bootstrap table 数据表格行内修改的实现代码
  • 2017-05-11Google 爬虫如何抓取 JavaScript 的内容
  • 2017-05-11微信小程序 详解下拉加载与上拉刷新实现方法
  • 2017-05-11过期软件破解办法实例详解
  • 2017-05-11JavaScript字符集编码与解码详谈
  • 2017-11-23ES7之async/await异步方案
  • 2017-05-11Vuejs 组件——props数据传递的实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JS图片压缩(pc端和移动端都适用)
    • footer定位页面底部(代码分享)
    • Node.js websocket使用socket.io库实现实时聊天室
    • NodeJs下的测试框架Mocha的简单介绍
    • JS实现线性表的顺序表示方法示例【经典数据结构】
    • jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
    • jQuery实现ajax无刷新分页页码控件
    • 微信小程序 开发经验整理
    • React创建组件的三种方式及其区别
    • BootStrap 弹出层代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有