父节点
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操作的更多相关文章

  1. 抛开jQuery,拾起原生JS的DOM操作

    常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...

  2. 原生js封装dom操作库

    var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...

  3. 利用原生js的Dom操作实现简单的ToDoList的效果

    效果如下: 前端及js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. 整理一下原生js的dom操作

    获取元素 getElementById() getElementsByClass() getElementsByTagName getElementsByName node属性 前.后.父.子 pre ...

  5. js的dom操作(整理)(转)

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  6. js的DOM操作整理(整理)

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  7. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  8. JS的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  9. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

随机推荐

  1. zabbix 利用python脚本实现钉钉告警

    Zabbix 利用python脚本实现钉钉告警 1.安装python3.6环境 2.创建python脚本 cd local/zabbix-4.0.3/share/zabbix/alertscripts ...

  2. 渲染Keynote

    [渲染Keynote] 1.渲染图元(rendering primitives),可以是点.线.三角. 2.显卡对于显存的访问速度更快,而且大多数显卡对于RAM没有直接的访问权利 . 3.裁剪(Cli ...

  3. unittest测试

    标签(空格分隔): unittest unittest介绍: python里面也有单元测试框架-unittest,相当于是一个python版的junit. 一.unittest简介 1.先导入unit ...

  4. 203. Remove Linked List Elements (List)

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  5. ECMAScript6的原型

    class Car { constructor(name){ this.name = name; } getName(){ } } class Ferrari extends Car{ constru ...

  6. TZOJ 2999 Network(连通图割点数量)

    描述 A Telephone Line Company (TLC) is establishing a new telephone cable network. They are connecting ...

  7. c#: List.Sort()实现稳固排序(stable sort)

    1. 源起: KV 7.0加入列表管理功能,处理排序问题时,对空列表执行按大小.日期.长度排序发现,其中次序会发生改变,令人纳闷. 没天理呀,不应该啊!List.Sort()方法,它为什么? 对此问题 ...

  8. Mysql在Linux的基本操作文档

    总结了Mysql在Linux下的应用,以下是Linux操作系统操作MySQL常用命令小结,需要的朋友参考下: 1.Mysql服务 # chkconfig --list 列出所有系统服务 # chkco ...

  9. Activity 的启动过程深入学习

    手机应用也是一个app,每一个应用的icon都罗列在Launcher上,点击icon触发onItemClick事件. 我们要启动「淘宝」这个App,首先我们要在清单文件定义默认启动的Activity信 ...

  10. IEDriver executable needs to be available in the path

    解决办法: 去http://selenium-release.storage.googleapis.com/index.html 下载指定IE版本 解压后 拷贝到Python的目录下 重新运行,提示错 ...