前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下。

获取子节点


  1. children 不是标准的dom属性,但是几乎被所有浏览器支持。不包含文本节点.

注意:在IE中,children包含注释节点。

  1. 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原生的节点操作相关推荐

  1. JavaScript——DOM之节点操作

    节点操作 前述: 一.节点的概述 二.节点操作 1.节点层级 2.案列-下拉菜单 3.兄弟节点 4.创建节点 5.删除节点 6.案列 :留言并且删除节点 7.复制节点 8.案例:动态生成表格 9.三种 ...

  2. 拿捏 javascript 中的节点操作

  3. JavaScript的节点操作 —— 增加节点

    目录 JavaScript中的节点操作分为:增.删.改.查(获取),四大类型. 我们直接利用案例来学习: HTML布局代码: JavaScript代码实现: 第一步:获取所有要用到的元素对象(可以利用 ...

  4. 3.JavaScript核心BOM操作学习(界面交互功能)——JavaScript获取自定义的方法,开始进行节点操作

    今天事情比较多,学习的东西比较少 第三天继续 H5新增获取自定义的方法 <body><div getTime="20" data-index="2&qu ...

  5. html dom节点取父节点,JavaScript DOM父子兄节点操作必看详解

    首先我们知道网页中的所有内容都是节点(标签.属性.文本.注释等) ,之前我们已经说过了一些元素的获取方法 比如element.getElementById(),element.querySelecto ...

  6. Javascript 【操作元素、节点操作】

    Javascript 4. 操作元素 4.5 排他思想 案例:百度换肤 案例:表格隔行变色 案例:表单全选取消全选案例 4.6 自定义属性的操作 1. 获取属性值 2. 设置属性值 3. 移除属性 案 ...

  7. JavaScript里的父、子节点操作源码解析

    父.子节点操作.兄弟节点 1.节点概述 <!DOCTYPE html> <html lang="en"><head><meta chars ...

  8. javascript中节点操作、节点属性、节点获取、创建节点、删除节点、克隆节点

    节点操作 节点操作实际是利用DOM树把节点划分为不同的层次关系,常见父子兄弟级关系 节点属性: 节点一般有三个属性:nodeType节点类型(其中元素节点值为1,属性节点值为2,文本节点值为3).no ...

  9. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

最新文章

  1. Spark(六):SparkSQLAndDataFrames对结构化数据集与非结构化数据的处理
  2. 锅都不敢背,凭什么让大家跟着你干?
  3. 如何把自己的经历写成小说_《诡秘小说》:读者与作者共同创作,难分真假,午夜不敢独自看!...
  4. MySQL5日期类型DATETIME和TIMESTAMP相关问题详解
  5. MySql里的My是指谁?
  6. [html] 给内联元素加float与给块元素加float有什么区别?
  7. 双指针法(leetcode分类解题,C++代码详细注释)
  8. h3c trunk口改access_H3CNE配置VLAN的Access链路端口和Trunk链路端口
  9. 自动驾驶算法-滤波器系列(六)——10+种经典滤波算法
  10. SparkSQL概念介绍
  11. [转载]github在线更改mysql表结构工具gh-ost
  12. 西门子g120变频器接线图_西门子S7—1500第二十二讲(G120变频器第二篇)
  13. redhat server 5.4 64 bit 下安装 RealTek RTL8111E 网卡
  14. 六字诀养生法 气功口诀
  15. 黑桃符号java怎么打印出来_java入门基础(四)
  16. 手把手指导制作一个 WebAR 与小程序 AR
  17. 雷顿学院《百万大咖》校园行
  18. 2021年化工自动化控制仪表考试题及化工自动化控制仪表考试试卷
  19. 利用selenium 爬取豆瓣 武林外传数据并且完成 数据可视化 情绪分析
  20. Java生成海报带二维码,原图或base64返回

热门文章

  1. 关于springboot工具类中@Autowired注入bean,用static直接修饰,静态方法使用bean时报空指针异常错误...
  2. Probabilistic Principal Component Analysis
  3. 官网快速搭建spring boot 项目
  4. c#之Redis实践list,hashtable
  5. 使用JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength属性...
  6. 02 - Unit07:显示笔记下拉菜单、笔记的分享功能、笔记的删除功能
  7. 好架构是进化来的,不是设计来的
  8. HDU 5214 Movie【贪心】
  9. C++ (14) 异常处理
  10. VC++实现获取网络时间