原生js的dom操作
父节点
parentNode
第一个子节点 只会获取到元素节点
firstElementChild ★★★★★
第一个子节点 (如果有文本节点将会获取到文本节点)
firstChild
最后一个节点 只会获取到元素节点
lastElementChild ★★★★★
最后一个子节点 (如果有文本节点将会获取到文本节点)
lastChild
当前节点的后一个(下一个)节点 注:只会获取到元素节点(dom操作推荐使用这种方法,IE9测试兼容,IE8未测试)
nextElementSibling ★★★★★
当前节点的后一个(下一个)节点 (如果下一个节点是文本节点的话将获取到文件节点)
nextSibling
当前节点的前一个(上一个)节点 注:只会获取到元素节点(dom操作推荐使用这种方法,IE9测试兼容,IE8未测试)
previousElementSibling ★★★★★
当前节点的前一个(上一个)节点 注:如果上一个节点是文本节点的话将获取到文件节点
previousSibling
当前节点的子节点 注:只会获取到元素节点(IE9测试兼容,IE8未测试)
children ★★★★★
当前节点的子节点 注:子节点中如果有文本节点,那么也会同时获取到
childNodes
节点(元素)的属性
attributes
li.attributes //将会输出li节点的所有属性值 注:是属性和值
li.attributes.id //将会输出li节点的id属性值 注:是属性和值
把指定属性设置或修改为指定的值。
setAttribute()
li.setAttribute("要修改的属性","修改的值")
创建一个节点(元素)
document.createElement("div")
在指定的子节点前面插入新的子节点。
insertBefore()
"父元素".insertBefore("要插入的节点","父元素.children[0]");//将元素插入到父元素的第一个子元素
插入新的子节点
appendChild(node)
ul.appendChild(li) //将li节点插入到ul子节点的最后
删除子节点
removeChild(node)
ul.removeChild(li) 删除ul的子节点中的li节点
删除当前节点 注:IE9不兼容
remove()
替换元素节点
//父元素.replaceChild (新元素,旧元素 )
node.replaceChild (newnode,oldnode )
插入HTML或者字符串
innerHTML && innerText
h1.innerHTML='<span>插入的标签</span>' //可以插入带标签
h1.innertext = '文字' //只能插入文字
表单
td&&tr 获取到自己所在的索引
td.cellIndex//返回td所在tr的索引
tr.rowIndex//返回tr所在tbody的索引
获取自定义属性
'要获取自定义属性的对象'.getAttribute ( 'data-name' )
原生js的dom操作的更多相关文章
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- 原生js封装dom操作库
var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...
- 利用原生js的Dom操作实现简单的ToDoList的效果
效果如下: 前端及js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 整理一下原生js的dom操作
获取元素 getElementById() getElementsByClass() getElementsByTagName getElementsByName node属性 前.后.父.子 pre ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- JS的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
随机推荐
- zabbix 利用python脚本实现钉钉告警
Zabbix 利用python脚本实现钉钉告警 1.安装python3.6环境 2.创建python脚本 cd local/zabbix-4.0.3/share/zabbix/alertscripts ...
- 渲染Keynote
[渲染Keynote] 1.渲染图元(rendering primitives),可以是点.线.三角. 2.显卡对于显存的访问速度更快,而且大多数显卡对于RAM没有直接的访问权利 . 3.裁剪(Cli ...
- unittest测试
标签(空格分隔): unittest unittest介绍: python里面也有单元测试框架-unittest,相当于是一个python版的junit. 一.unittest简介 1.先导入unit ...
- 203. Remove Linked List Elements (List)
Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...
- ECMAScript6的原型
class Car { constructor(name){ this.name = name; } getName(){ } } class Ferrari extends Car{ constru ...
- TZOJ 2999 Network(连通图割点数量)
描述 A Telephone Line Company (TLC) is establishing a new telephone cable network. They are connecting ...
- c#: List.Sort()实现稳固排序(stable sort)
1. 源起: KV 7.0加入列表管理功能,处理排序问题时,对空列表执行按大小.日期.长度排序发现,其中次序会发生改变,令人纳闷. 没天理呀,不应该啊!List.Sort()方法,它为什么? 对此问题 ...
- Mysql在Linux的基本操作文档
总结了Mysql在Linux下的应用,以下是Linux操作系统操作MySQL常用命令小结,需要的朋友参考下: 1.Mysql服务 # chkconfig --list 列出所有系统服务 # chkco ...
- Activity 的启动过程深入学习
手机应用也是一个app,每一个应用的icon都罗列在Launcher上,点击icon触发onItemClick事件. 我们要启动「淘宝」这个App,首先我们要在清单文件定义默认启动的Activity信 ...
- IEDriver executable needs to be available in the path
解决办法: 去http://selenium-release.storage.googleapis.com/index.html 下载指定IE版本 解压后 拷贝到Python的目录下 重新运行,提示错 ...