一. 获取节点

1. 获取元素节点

getElementsById

getElementsByTagName

getElementsByClassName

2. 获取属性节点

getAttribute

3. 获取子节点

childNodes属性  // 获取所有子节点, 包括换行

firstChild属性

lastChild属性

previousElementSibling属性  // 获取相邻上一个节点

nextSibling属性  // 获取相邻下一个节点

parentNode属性  // 获取父节点, 包括父节点的所有子节点

二. 获取节点类型

nodeType属性

拓展: 常见节点类型

元素 1
属性 2
文本 3
注释 8
文档, 即document对象 9

三. 创建节点

createElement

createAttribute  // 创建属性节点, 之后可以使用value属性赋值

createTextNode

cloneNode  // 赋值节点, true保留子节点 false不保留子节点

四. 添加节点

appendChild  // 在元素节点内部的最后, 附加一个子节点(通常是元素节点, 文本节点)

insertBefore  // 插入一个与当前节点同级的新节点, 位置在当前节点的前面, 说明：document.insertBefore的使用方式是错误的, 一般情况下, 无法在根节点前插入元素

五. 删除节点

1. 元素, 文本节点

removeChild  // 删除子节点

remove  // 删除当前节点

2. 属性节点

removeAttribute

六. 设置节点

setAttributeNode  // 为当前元素节点添加一个属性节点

appendChild  // 为当前元素节点添加一个子节点

replaceChild  // 替换当前节点的子节点

附: 测试代码

 <!DOCTYPE html>

 <html>

     <head>

         <title>Page Title</title>

     </head>

 <body>

     <div class="box1">

         <h2 id="title1">商品栏</h2>

         <ul id="goods"><li class="first">商品1</li><li>商品2</li><li>商品3</li><li class="last">商品4</li></ul>

     </div>

     <script>

         /* 获取已存在节点 */

         var h2Node1_exist = document.getElementById("title1");

         var liNode1_exist = document.getElementsByClassName("first")[0];

         var ulNode1_exist = document.getElementById("goods");

         var liNode2_exist = document.getElementsByTagName("li")[2];

         /* 创建新节点 */

         var liNode1 = document.createElement("li");

         var txtNode1 = document.createTextNode("halo");

         liNode1.appendChild(txtNode1);

         /* 获取节点

         console.log(document.getElementById("goods"));

         console.log(document.getElementsByTagName("li"));

         console.log(document.getElementsByClassName("last"));*/

         /* 创建节点

         // 1创建元素节点

         console.log(document.createElement("span"));

         // 2创建属性节点并赋值

         var attrNode = document.createAttribute("name");

         attrNode.value = "shaohsiung";

         console.log(attrNode);

         // 将属性节点设置到标签上

         h2Node1_exist.setAttributeNode(attrNode);

         console.log(h2Node1_exist);

         // 3创建文本节点

         var txtNode = document.createTextNode("halo world");

         // 将文本节点设置到标签体内

         h2Node1_exist.appendChild(txtNode);*/

         /* 添加节点

         // 添加子节点

         h2Node1_exist.appendChild(liNode1);

         // 某节点前插入节点

         // 说明：document.insertBefore的使用方式是错误的，无法在根节点前插入元素

         ulNode1_exist.insertBefore(liNode1, liNode1_exist); */

         /* 复制节点

         // 不包含子节点

         var result1 = ulNode1_exist.cloneNode(false);

         console.log(result1);

         // 包含子节点

         var result1 = ulNode1_exist.cloneNode(true);

         console.log(result1);*/

         /* 删除节点

         // 删除子节点

         ulNode1_exist.removeChild(liNode1_exist);

         // 删除标签的属性

         ulNode1_exist.removeAttribute("id");

         // 删除当前节点

         ulNode1_exist.remove(); */

         /* 获取节点类型

         常见节点类型小结：

             元素 1

             属性 2

             文本 3

             注释 8

             文档, 即document对象 9

          */

         //console.log(document.nodeType);

         /* 操作属性节点

         // 获取元素节点某个属性值

         console.log(h2Node1_exist.getAttribute("id"));

         // 为元素节点设置属性值

         h2Node1_exist.setAttribute("name", "shaohsiung");

         // 删除元素节点属性

         h2Node1_exist.removeAttribute("name"); */

         /* 查找节点

         // 获取ul标签所有子节点（包括换行）

         // 说明：要特别注意这里的换行

         console.log(ulNode1_exist.childNodes);

         // 获取ul标签第一个子节点

         console.log(ulNode1_exist.firstChild);

         // 获取ul标签最后一个子节点

         console.log(ulNode1_exist.lastChild);

         // 可递归调用， 这里获取到文本节点

         console.log(ulNode1_exist.lastChild.lastChild); */

         /* 获取相邻的节点

         // 上一个

         console.log(liNode2_exist.previousElementSibling);

         // 下一个

         console.log(liNode2_exist.nextSibling); */

         // 获取父节点

         // 说明：包括父节点的所有子节点

         console.log(liNode2_exist.parentNode);

         // 替换当前节点的子节点

         ulNode1_exist.replaceChild(liNode1, liNode2_exist);

     </script>

 </body>

 </html>

常用DOM API总结的更多相关文章

  1. 常用DOM API

    Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node有 element,text,attribute,comment,documen ...

  2. React常用的API说明

    楼主刚开始学习react,感受到了他的博大精深,看到很多莫名的用法,不知云云,找了很多没有找到参考手册,只有在中文社区和react官方看了一些,收集了一些比较常用的API,有补充的可以楼下评论补充.后 ...

  3. 第二篇、JavaScript常用的API

    下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...

  4. DOM API详解

    来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...

  5. JavaScript DOM API初步（整理）

    文档对象模型 文档对象模型(Doucment Object Model,DOM)是表示文档(如HTML文档.XML文档)和访问.操作构成文档的各种元素的应用程序接口.在DOM中,HTML文档的层次结构 ...

  6. jquery中最常用的API有哪些

    jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...

  7. web dom api中的Selection和Range

    如果你做过wysiwyg这样的app,一个很让人头疼的问题是如何保证执行bold,italic等格式化操作后保持先前鼠标所在的位置.要好好的解决这个问题,就必须将Selection和Range的api ...

  8. 抛弃jQuery：DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  9. 抛弃jQuery：DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

随机推荐

  1. Shiro术语

    请花2分钟阅读和理解Shiro中的术语 - 这是非常重要的.这里的术语和概念在文档中的任何地方都被引用,并且将大大简化您对Shiro和一般的安全性的理解. 因为使用了一些您可能不太明白的术语,所以安全 ...

  2. jquery操作html元素之（设置内容和属性）

    设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容( ...

  3. html清除浮动的6种方法示例

    使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签 由于inline-bl ...

  4. spark-submit 应用程序第三方jar文件

    第一种方式:打包到jar应用程序 操作:将第三方jar文件打包到最终形成的spark应用程序jar文件中 应用场景:第三方jar文件比较小,应用的地方比较少 第二种方式:spark-submit 参数 ...

  5. POJ 1946 Cow Cycling

    Cow Cycling Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 2516   Accepted: 1396 Descr ...

  6. 初探.Net Core API 网关Ocelot（一）

    一.介绍 Ocelot 是基于.NetCore实现的开源的API网关,支持IdentityServer认证.Ocelot具有路由.请求聚合.服务发现.认证.鉴权.限流熔断等功能,并内置了负载均衡器与S ...

  7. go 数据类型和操作符

    文件名&关键字&标识符 1. 所有go源码以 .go结尾 2. 标识符以字母或者下划线开头,大小写敏感:add, Add, _add _是特殊标识符,用来忽略结果 3. 保留关键字 G ...

  8. Linux 实用指令（9）--进程管理

    目录 进程管理 1 进程的基本介绍 2 显示系统执行的进程 2.1 说明: 2.2 ps指令详解 2.3 应用实例 3 终止进程kill和killall 3.1 介绍 3.2 基本语法 3.3 常用选 ...

  9. JS对象 向下取整floor() floor() 方法可对一个数进行向下取整。 语法: Math.floor(x)

    向下取整floor() floor() 方法可对一个数进行向下取整. 语法: Math.floor(x) 参数说明: 注意:返回的是小于或等于x,并且与 x 最接近的整数. 我们将在不同的数字上使用 ...

  10. element-ui表格点击一行展开

    转载:https://www.cnblogs.com/xiaochongchong/p/8127282.html <template> <el-table :data="t ...