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. cocos2dx 3.3 C++工程添加lua支持

    准备工作: 1. 拷贝cocos2d-x-3.3rc0\external\lua整个文件夹到项目中(如myProject\cocos2d\external\lua) 2. 拷贝cocos2d-x-3. ...

  2. 【一天一道LeetCode】#231. Power of Two

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  3. 还在繁琐的敲MVP接口和实现类吗，教你一秒搞定。

    只有程序员懒起来,才能提高开发效率 233333 在MVP的使用过程中,我们需要反复的去写各种MVP的接口和实现类, 实在是 太麻烦了!!所以抽时间撸了一款插件(只可用于Intellj IDEA 和 ...

  4. JavaI/O体系详解

    Java中IO操作主要是指使用Java进行输入,输出操作,Java中所有的IO操作类都存放在Java.io包中,在使用时需要导入此包. 在整个Java.io包中最重要的就是5个类和一个接口.5个类指的 ...

  5. 远程调试Eclipse插件的设置

    1. 被调试方建立一个命令行来运行Eclipse debugEclipse.cmd: eclipse.exe -nl zh_CN -vmargs -XX:+HeapDumpOnOutOfMemoryE ...

  6. Uva - 12174 - Shuffle

    用滑动窗口的思想,用一个数组保存每个数在窗口中出现的次数.再用一个变量记录在窗口中恰好出现一次的的数的个数,这样可以枚举所有可能的答案,判断它所对应的所有串口,当且仅当所有的串口均满足要求时这个答案可 ...

  7. TCP的ACK确认系列 — 发送状态转换机

    主要内容:TCP的ACK发送方式,以及ACK发送状态转换机的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 概述 TCP采用两种方式来发送ACK: ...

  8. javascript之DOM编程改变CSS样式（简易验证码显示）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于reverse_iterator

    这个reverse_iterator曾经搞得我头大,其对应的函数也是那么的可不理解...现在一切都好了. 对于left_null>1->2->3->4->right_nu ...

  10. (NO.00001)iOS游戏SpeedBoy Lite成形记(六)

    为了能让玩家可以在比赛结束时清楚看到每位选手的成绩,我们需要在GameScene场景的track对象中添加一些新的元素. 在SpriteBuilder中打开GameScene.ccb,创建1个标签对象 ...