JavaScript原生的节点操作
前言:原生是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之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- JavaScript选择器和节点操作
感谢:链接(视频讲解很清晰) 下文中讲解用到Chrome中的console调试台,如果不懂最好先看一下:链接 JavaScript选择器 作用:选取html中的标签等内容,最重要的还是为节点的操作(增 ...
- 原生JS节点操作
获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...
- js原生的节点操作API
// yi获取元素节点 //一 :过id的方式( 通过id查找元素,大小写敏感,如果有多个id只找到第一个) document.getElementById('div1'); // 通过类名查找元素, ...
- JavaScript之DOM节点操作
a.appendChild(b) 追加标签 a是b的父级,将b追加到a中 追加标签 a.insertBefore(b,c); a是b和c的父级,在c前面插入b 删除标签 a.removeCli ...
- javascript之表格节点操作
<html> <div class='add'> 名字: <input type="" name=""&g ...
- JS节点操作(JS原生+JQuery)
JavaScript与JQuery节点操作 节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点 ...
- JavaScript之DOM操作,事件操作,节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
随机推荐
- javactript关闭窗体,刷新父窗体
//关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=javascript>window.close();< ...
- achartengine画出动态折线图
achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...
- k-means算法的Python实现
#coding=utf-8 import codecs import numpy from numpy import * import pylab def loadDataSet(fileName): ...
- find 路径必须在表达式之前
http://sukaka.blog.51cto.com/379985/906008 把*号引起来.
- iOS之PCH文件
在Xcode6之前,创建一个新工程xcode会在Supporting files文件夹下面自动创建一个“工程名-Prefix.pch”文件,也是一个头文件,pch头文件的内容能被项目中的其他所有源文件 ...
- log4cxx第三篇----使用多个logger
使用多个logger时,所有logger的配置写在一个配置文件里面 两个例子: 1 一个继承的例子(http://logging.apache.org/log4cxx/) // file com/fo ...
- HTML学习(五)链接
1.创建文本链接 <html> <body> <p> <a href="/index.html">本文本</a> 是一个 ...
- AFNetworking封装思路简析
http://blog.csdn.net/qq_34101611/article/details/51698473 一.AFNetworking的发展 1. AFN 1.0版本 AFN 的基础部分是 ...
- kvm下Windows激活方式小计
使用kvm创建widnwos镜像模板,镜像模板默认是已经激活的正版系统,但是使用程序拷贝部署到不同的机器后发现已经激活的系统变成未激活状态,我们需求就是需要拷贝到不同的机器也能显示是正版系统 网上找了 ...
- Spring AOP进行日志记录,管理
在java开发中日志的管理有很多种.我一般会使用过滤器,或者是Spring的拦截器进行日志的处理.如果是用过滤器比较简单,只要对所有的.do提交进行拦截,然后获取action的提交路径就可以获取对每个 ...