DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API。
DOM节点树:在文档中出现的空格、回车、标签、注释、文本、doctype、标签等都属于DOM节点。

操作DOM节点的方式无非就是:创建、添加(插入)、移除、替换、查找(获取)、克隆DOM节点。

创建文本节点:var newText = document.createTextNode('文本节点');
创建标签节点:var newNode = document.createElement('div');

添加(插入)子节点至末尾:父节点.appendChild(子节点);
添加(插入)子节点至某节点前:父节点.insertBefore(子节点, 某节点);

移除子节点:父节点.removeChild(子节点);

替换节点:父节点.replaceChild(替换后的节点, 替换前的节点);

查找(获取)节点:
查找(获取)所有子节点:父节点.childNodes
查找(获取)所有是标签类型的子节点:父节点.children
查找(获取)下一个兄弟节点:某节点.nextSibling
查找(获取)上一个兄弟节点:某节点.previousSibling
查找(获取)父节点:子节点.parentNode
查找(获取)第一个子节点:父节点.firstChild
查找(获取)最后一个子节点:父节点.lastChild

也可以使用document.get…的方法来获取,详细请看:JS获取标签方法及兼容处理

原生JS的DOM节点操作的更多相关文章

  1. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  2. JS对DOM节点操作整理

    获取节点: //按照ID获取 document.getElementById('element'); //按照节点名称获取,返回类数组对象 document.getElementsByTagName( ...

  3. js的DOM节点操作:创建 ,插入,删除,复制,查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  4. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  5. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  6. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  7. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  8. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  9. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

随机推荐

  1. SUPPORTDIR引用的文件的加入

    上一篇转载了SUPPORTDIR的理论解释,如今截图说明实际操作: 选择依赖的语言,在右面的files框里右键点击,选择Insert Files插入文件,编译.由于安装得时候,压缩包会解压成一个暂时文 ...

  2. LeetCode: Palindrome Partitioning [131]

    [称号] Given a string s, partition s such that every substring of the partition is a palindrome. Retur ...

  3. Android 通过应用程序来设置系统的日期和时间中的

    Android 通过应用程序来设置系统的日期和时间中的 android 2.3 android 4.0 测试可行,刚需ROOT权限. import java.io.DataOutputStream; ...

  4. 网络广告公司的恐慌 XSS广告终结者(html5新特性)

    人们在平时网络冲浪的时候,有时候会发现当前网站有很多莫名其妙的广告,这些广告会被导向到站外. 这些广告可能是你安装了一些免费网络软件后强制安装的浏览器插件导致的. 譬如chrome浏览器:

  5. Cordic 算法之 反正切

    在通信的算法中,常采用Cordic算法之一,知道角度产生正交的的正弦余弦, 或者知道正弦和余弦求角度,求反正切. 1. 求正弦和余弦值. 方法:旋转角度,得到正弦余弦值: 再旋转角度,到达下一个正弦余 ...

  6. Cordic 算法的原理介绍

    cordic 算法知道正弦和余弦值,求反正切,即角度. 采用用不断的旋转求出对应的正弦余弦值,是一种近似求解发. 旋转的角度很讲求,每次旋转的角度必须使得 正切值近似等于 1/(2^N).旋转的目的是 ...

  7. Pro Aspnet MVC 4读书笔记(4) - Working with Razor

    Listing 5-1. Creating a Simple Domain Model Class using System; using System.Collections.Generic; us ...

  8. 写你自己 android 多通道打包工具 可以包libs和.so文件

    android上传应用程序,需要区分各个信道. 通常更改配置文件中的一个通道id,假设有多个通道,手动更改并生成apk这将是非常麻烦的,及增加误差的概率. 在这个课堂上分享一个打包工具.也可在网上类似 ...

  9. 解决 configure.ac:17: error: possibly undefined macro: AC_PROG_LIBTOOL

    当安装configure.ac:17: error: possibly undefined macro: AC_PROG_LIBTOOL If this token and others are le ...

  10. 汉高澳大利亚sinox接口捆绑经典winxp,全面支持unicode跨语言处理

    用qtconfig(或者qtconfig-qt4)设置字体后,汉澳sinox视窗界面以跟winxp媲美的界面出现,爽心悦目. 并且视窗使用非常稳定.非常少出现死机无响应现象,堪称完美. 引入unico ...