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. linux　定时任务详解　按秒设定

    实现linux定时任务有:cron.anacron.at等,这里主要介绍cron服务. 名词解释: cron是服务名称,crond是后台进程,crontab则是定制好的计划任务表. 软件包安装: 要使 ...

  2. Android性能优化之Splash页应该这样设计

    目前SplashActivity的设计 目前市场上的应用在启动时基本上都会先启动一个SplashActivity,作为一个欢迎界面,为什么这样设计呢? 个人总结有三个优点: 1.可以给用户更好的体验 ...

  3. Java中把JSON和List结果集互转的代码片段整理

    1.将JSON字符串转换成List结果集的方式: //查询结果集 PageDatums picPageDatums = pictureLibraryService.selectPagePictureF ...

  4. Unity UGUI之Canvas&EventSystem

    最近想写一套关于UGUI所有控件的基础使用教程系列,主要是根据本人的使用心得来写的,所以其中可能难以避免会有不正确的地方. 好了进入主题,既然是第一篇,我觉得我有必要先介绍一下UGUI必不可缺的两个组 ...

  5. Java学习从菜鸟变大鸟之一 hashCode()和equals()的本质区别和联系

    在学习java,根据视频做实例的过程中,对equals和hashcode两个方法理解稍微深刻一点,主要是它们两个很容易混淆,容易出错,自己又通过网上的资料学习,和大家分享 equals()方法 equ ...

  6. UNIX环境高级编程——进程间通讯方法整理

    一.无名管道pipe #include <unistd.h> int pipe(int fd [2]) 二.fifo #include <sys/stat.h> int mkf ...

  7. xml解析之使用dom4j的api对xml文件进行CRUD（二）

    在使用dom4j的api对xml文件进行CRUD(一)见博客http://blog.csdn.net/qq_32059827/article/details/51524330的基础上,再对做一次练习. ...

  8. 一致性Hash算法介绍（分布式环境算法）

    32的整数环(这个环被称作一致性Hash环),根据节点名称的Hash值(其分布范围同样为0~232)将节点放置在这个Hash 环上.然后根据KEY值计算得到其Hash值(其分布范围也同样为0~232  ...

  9. Oracle PL/SQL Articles

    我是搬运工....http://www.oracle-base.com/articles/plsql/articles-plsql.php Oracle 8i Oracle 9i Oracle 10g ...

  10. Oracle 11g Articles

    发现一个比较有意思的网站,http://www.oracle-base.com/articles/11g/articles-11g.php Oracle 11g Articles Oracle Dat ...