一. 获取节点

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. 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 转载 https://www.cnblogs.com/yunfeifei/p/3993401.html

    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...

  2. C++ 编译过程简介

    C/C++程序编译流程: 预处理->编译->汇编->链接 具体的就是: 源代码(source coprede)→预处理器(processor)→编译器(compiler)→汇编程序( ...

  3. 通过Matlab SDK 获取tushare数据

    概要说明 版本要求:Matlab需要2016b及以上版本 接口说明:可以用help pro_api和help pro_bar查看 demo程序:请参考tushare_pro_test.m文件 程序包下 ...

  4. 随笔-ansible-4

    触发器: 一个任务同时调用多个触发器: 为远程主机上的用户设置环境变量: 保存前一步命令的输出结果,并保存到foo中: 添加环境变量的另一种方式: 注意:lineinfile模块只适用于修改少量环境变 ...

  5. iOS进阶二-KVC

    概述 KVC的全程是Key-Value Coding, 俗称"键值编码",可以通过一个key来访问属性 常见的AP有 - (void)setValue:(nullable id)v ...

  6. SQL一些记录

    1,2字段约束create unique index [索引名] on 软件信息表(S_SName,S_Edition)

  7. CSS在工程中改变之面向对象的 CSS

    oocss的概念 众多开发者忽视了css的表现(认为它) oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例. oocss的作用 1.加强代码 ...

  8. GoDaddy商务主机建站具有的优势

    GoDaddy是世界第一域名注册服务商,近年来凭借着优异的性能受到国内站长的欢迎,其中Godaddy商务主机得到了很多站长的喜爱,那么为什么GoDaddy商务主机可以受到那么多站长的喜爱呢?下面就带大 ...

  9. Largest Submatrix

    Largest Submatrix 给出一个\(n\times m\)的网格,网格里只放有字符a,b,c,d,w,x,,z,现在你可以将其中的w换成a,b,把x换成b,c,把y换成a,c,把z换成a, ...

  10. phonegap 开发指南系列----开始之前(1)

    在基于任何平台(安卓.ios等phonegap支持的平台)上做phonegap开发之前,需要安装 cordova 的 command-line interface (CLI) .CLI详细:http: ...