DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许程序员添加、修改页面的一部分。

  1. 节点层次：DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。如：

    • document节点有一个独生子：html元素。
    • 每个元素节点其实是一个对象。
    • 元素、元素的属性、甚至注释，都有各自的节点和各自节点的位置。
    • 所以，节点有很多种类型，而这些不同的节点都继承自一个基础类型：Node类型。
  2. Node类型的节点
    • Javascript中的所有节点类型均继承自Node类型。所以所有节点类型都有一部分相同的属性和方法。
    • 每个节点都有一个nodeType属性，这个属性标明节点的类型。在Node对象中保存着12种常量，分别代表12种节点类型。 
      比如：
      
Node.ELEMENT_NODE=1;
      
Node.ATTRIBUTE_NODE=2;
      
Node.TEXT_NODE=3;
      
Node.COMMENT_NODE=8;
      
。。。
      
通过节点的nodeType来判断节点类型，比如：
      
someNode.nodeType==1,说明该节点是元素节点。

    • 每个节点都有一个childNodes属性，保存着一个NodeList对象，该对象保存该节点的孩子信息。

      且每个孩子之间都是同胞关系。通过每个孩子节点的previousSibling和nextSibling属性，可以访问其他同胞节点。
    • 每个节点都有一个parentNode属性，指向文档树中的父节点。
    • 父子兄弟关系图:
    • 每个节点除了有些相同的属性外，还有一些相同的方法用于操作节点。 
      appendChild()，加一个孩子。
      
insertBefore(),加一个孩子，并放在某个孩子之前。
      
replaceChild(),替换某个孩子。
      
removeChild(),移除某个孩子。
  3. Document类型的节点
    • Document节点就是HTML节点树的根节点，表示整个HTML界面。
    • document对象是BOM中window对象的一个属性，因此可以作为一个全局对象来访问。
    • document对象有一个body属性，直接指向<body>元素。
    • document对象有一个title属性，标记文档（页面）的标题。
    • 通过getElementById()、getElementByTagName()来查找document内的元素。
  4. Element（元素）类型的节点
    • 每个元素都有自己的属性（id、name、class等），操作这些属性的方法主要有：

      getAttribute();
      
setAttribute();
      
removeAttribute();
    • style属性和onclick属性不能通过getAttribute()方法获取元素。
  5. DOM2和DOM3
    • DOM1级主要定义的是HTML和XML文档的底层结构。DOM2、3级则在这个结构的基础上引入了更多的交互能力。
    • DOM2、3级的目的在于扩展DOM的API，以满足操作XML的更多需求。
    • XML命名空间
      • 有了XML命名空间，不同XML文档的元素就可以混合在一起，不必担心发生命名冲突。
      • 命名空间用xmlns特性来指定。
      • XHTML的命名空间是http://www.w3.org/1999/xhtml.
      • 任何格式良好的XHTML页面都要讲命名空间包含在内。
      • 命名空间示例： 
        <html xmlns="http://www.w3.org/1999/xhtml">
        
<head>
        
<title>Title of the document</title>
        
</head>

<body>
        
The content of the document......
        
</body>

</html>

javascript笔记6-DOM的更多相关文章

  1. 笔记-JavaScript与HTML DOM

    引用源:https://www.cnblogs.com/propheterLiu/p/5966791.html 笔记-JavaScript和HTML DOM 区别: javascript JavaSc ...

  2. [Effective JavaScript 笔记]第3章：使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  3. JavaScript处理HTML DOM

    本来只想好好写一篇博文,最后弄到好像重构一样了,越做越不满意,先这样吧:) HTML DOM - JavaScript处理HTML DOM 获取HTML元素 改变HTML元素 增删HTML元素 添加事 ...

  4. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  5. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  6. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  7. [Effective JavaScript 笔记] 第4条：原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  8. [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  9. [Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  10. [Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

随机推荐

  1. 【Unity3D游戏开发】NGUI之多分辨率下完美分布式协同开发 (五)

    NGUI多分辨率下完美分布式协同开发:不同分辨率下相对于屏幕坐标的Perfab数据不再丢失 NGUI多分辨率下完美分布式协同开发不同分辨率下相对于屏幕坐标的Perfab数据不再丢失 开发问题 原因分析 ...

  2. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列：排序、筛选和分页

    这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第三篇:排序.筛选和分页 原文:Sort ...

  3. python文件和目录操作方法大全（含实例）

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...

  4. 【树莓派】使用树莓派制作img镜像（二）

    树莓派制作的镜像,需要如何使用,这里直接引用目前树莓派官方的文章,不再重复描述: 参考:http://shumeipai.nxez.com/2013/08/31/usb-image-tool.html ...

  5. C#中的多线程 - 基础知识

    原文:http://www.albahari.com/threading/ 文章来源:http://blog.gkarch.com/threading/part1.html 1简介及概念 C# 支持通 ...

  6. PHP文本框的值随下拉框改变

    初学PHP,下面是实现文本框内容随下拉框变化的代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  7. 使用Github管理项目代码的版本

    作为开源代码库以及版本控制系统,Github拥有140多万开发者用户.随着越来越多的应用程序转移到了云上,Github已经成为了管理软件开发以及发现已有代码的首选方法. 在Git中并不存在主库这样的概 ...

  8. redis 在32位系统安装以及使用

    1.下载32位redis文件. http://pan.baidu.com/s/1eRIZPAE 我下载后的路径是:E:\Redis\Redis 里面的文件如图:  2.调取命令窗口 win+R,输入命 ...

  9. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  10. myeclipse maven pom.xml 配置错误

    http://www.oschina.net/question/2265006_219341#tags_nav maven pom.xml 配置文件错误       腾讯云消息队列CMQ架构解析> ...