DOM 是 Document Object Model（文档对象模型）的缩写。

  • HTML 的标准对象模型
  • HTML 的标准编程接口

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

HTML
DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

通过
HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

<html>

  <head>

    <title>DOM 教程</title>

  </head>

  <body>

    <h1>DOM 第一课</h1>

    <p>Hello world!</p>

  </body>

</html>

从上面的 HTML 中：

  • <html> 节点没有父节点；它是根节点
  • <head> 和 <body> 的父节点是 <html> 节点
  • 文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

  • <html> 节点拥有两个子节点：<head> 和 <body>
  • <head> 节点拥有一个子节点：<title> 节点
  • <title> 节点也拥有一个子节点：文本节点 "DOM 教程"
  • <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

  • <head> 元素是 <html> 元素的首个子节点
  • <body> 元素是 <html> 元素的最后一个子节点
  • <h1> 元素是 <body> 元素的首个子节点
  • <p> 元素是 <body> 元素的最后一个子节点

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。


方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

一些 DOM 对象方法

这里提供一些您将在本教程中学到的常用方法：

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

所有
HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

nodeName
始终包含 HTML 元素的大写字母标签名。

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9





htmlDOM操作1的更多相关文章

  1. htmldom操作添加标签顺序

    <!DOCTYPE html> <html> <body> <div id="div1"> </div> <scr ...

  2. JavaScript基本知识点整理（超实用）

      絮叨絮叨                   今天给大家分享一下这两天自己整理的JavaScript部分的笔记,下面都是我觉得比较常用的,希望能帮助到大家! 1. 导入JS的三种方式 ①在HTML ...

  3. 11-28 网页基础--JavaScript(DOM)

    网页基础 第二部分--HTMLDOM操作 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 ...

  4. 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  5. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  6. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  7. jQuery -- DOM节点的操作

    DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...

  8. Jquery一般操作归纳

    一.DOM操作分类    1.DOM Core  getElement(s)获得元素        2.HTML-DOM  document.对象/操作标签的属性        3.CSS-DOM   ...

  9. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

随机推荐

  1. 最简单的基于librtmp的示例：接收（RTMP保存为FLV）

    ===================================================== 最简单的基于libRTMP的示例系列文章列表: 最简单的基于librtmp的示例:接收(RT ...

  2. UNIX网络编程——非阻塞connect：时间获取客户程序

    #include "unp.h" int connect_nonb(int sockfd, const SA *saptr, socklen_t salen, int nsec) ...

  3. unix os下du df简单用法

    转自:http://dadoneo.iteye.com/blog/984963 du命令参数详解见:http://baike.baidu.com/view/43913.htm 下面我们只对其做简单介绍 ...

  4. sql的索引：网上看到不错，整理成自己的东西

    数据库建立索引可以提高查询速度.假如我们创建了一个 mytable表: CREATE TABLE mytable(ID INT NOT NULL,username VARCHAR(16) NOT NU ...

  5. Ubuntu 15.10下的WebStorm-11.0.3完美破解

    由于最新的JetBrains 发布了最新版本的IntelliJ IDEA的各个版本,而且更换了注册机的使用方式,这就导致了之前对WebStorm的破解方法不能在使用了.所以我们就必须另寻他法咯.如题, ...

  6. mysql的left jion：就是left outer join（right join同理）

    左外连接: A left jion B on A.id=B.id 就是A表数据不动,将B表里面能和A对应上的数据补充到A表数据后 而右外连接: rignt jion 则是将A补充到B,B不动,保存全部 ...

  7. maven -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME

    遇到错误:-Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME解决办法:在环境变量中设置M2_HO ...

  8. casio计算器计算统计数据

    http://blog.csdn.net/pipisorry/article/details/50257319 使用casio计算器计算输入数据均值.标准差和相关系数的方法,lz使用casio fx8 ...

  9. iOS中 SDWebImage手动清除缓存的方法 技术分享

    1.找到SDImageCache类 2.添加如下方法: - (float)checkTmpSize { float totalSize = 0; NSDirectoryEnumerator *file ...

  10. hive的top n

    注意 hive 的hsql没有 top n这个功能,不像sql. 所以实现top n如下: 我想说的SELECT TOP N是取最大前N条或者最小前N条. Hive提供了limit关键字,再配合ord ...