HTML DOM 探索

HTML DOM 探索

2017年2月10日20:54:11 CHJ_1993

1、前言

​ 因为最近比较忙，好久没有写博客了，记得我第一篇自我介绍的博客说经常给大家分享一些我学习的知识，但是时间过去这么久了，也没有更新几篇本章，可能刚开始写的文章也很烂。作为博客新手，希望大家原谅一下。

​ 今天有点时间， 我就来跟大家探讨一下 HTML DOM 的一些知识。好了下面开始正文.....

2、DOM的概念

DOM 是 (Document Object Model) 的缩写

• DOM 是针对 XML 和 HTML 文档的一个 api (应用程序接口)
• DOM 中描述了一个层级化的节点树
• DOM 中允许开发人员对页面的某一部分内容进行修改，移除，添加

W3C 中 DOM标准化分类分成三种：

• 核心 DOM ==== 针对任何结构化文档的标准模型
• XML DOM ==== 针对XML文档的标准模板
• HTML DOM ==== 针对HTML 文档的标准模板

DOM标准分化分为三种，那么前面两种我们今天不进行探索，我们今天主要来了解的是HTML DOM

3、HTML DOM 的探索

3.1 什么是HTML DOM ？

HTML DOM 是HTML的标准对象模型，也是HTML的标准编程接口

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

换句话说， HTML DOM 是关于如何获取、修改、添加或者删除HTML元素的标准

3.2 HTML DOM的节点

根据W3C(万维网) 的HTML DOM标准，HTML文档中所有的内容都是节点

• 整个文档 是一个文档节点
• 每个HTML元素都是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

下面我们引用网上的一张图来描述一下: (HTML DOM 的节点树结构)

3.2.1 HTML DOM 节点分类

HTML DOM 中个一共存在12 个节点类型，任何一个节点类型都属于这12个节点类型之一

如下表：

属性名称	代表中文含义
Node.ELEMENT_NODE	元素
Node.ATTRIBUTE_NODE	元素中的属性
Node.TEXT_NODE	纯文本(没有子节点)
Node.CDATA_SECTION_NODE	子节点是TextNode
Node.ENTITY_REFERENCE_NODE	文档中的实体引用
Node.ENTITY_NODE	DTD中的实体定义
Node.PROCESSING_INSTRUCTION_NODE	一个文档处理程序中使用的特有指令
Node.COMMENT_NODE	注释
Node.DOCUMENT_NODE	最外层的 (根节点)
Node.DOCUMENT_TYPE_NODE	文档类型定义
Node.DOCUMENT_FRAGMENT_NODE	更小型的Docment 的节点,定义整个数据类型主要是为了方便只希望提取文档的某一部分时使用
Node.NOTATION_NODE	DTD 的Nation定义

3.2.2 HTML DOM 文档节点的属性

文档节点的属性，我们今天主要认识的就只有三个：

• nodeName

  节点名称，只读

• nodeValue

  节点的值 ，可读可写

• nodeType

  节点的类型，只读

3.3 HTML DOM 核心对象 document 对象

在JavaScript中 是通过Document 来表示文档的，Document 的属性如下:

• document的节点类型 (nodeType) 为 9
• document 的节点名称 (nodeName) 是 #document
• document 的节点值(nodeValue) 为空(null)
• document 是没有父节点(parentNode) 的
• document 也没有根元素(ownerDocument)

3.3.1 通过document 来获取 元素（节点）

在JavaScript 获取元素的方式主要有以下中方法

1. document.getElementById() 通过ID的方式来获取元素.
2. document.getElementsByTagName() 根据标签名来获取元素
3. document.getElementsByName() 通过标签的name属性的值来获取元素
4. document.getElementsByClassName() 通过class 的属性值来获取元素
5. querySelector() 通过选择器名称来获取元素（获取匹配到的第一个）
6. querySelectorAll() 通过选择器名称来获取元素（获取全部）

3.3.1.1 document.getElementById()

通过元素中ID属性的属性值来查找元素

语法： node.getElementById("id");

注意：

1. 使用该方法不能同时查找多个ID
2. 如果有HTML中有相同ID，则只会返回一个元素
3. 在 低于 IE 8 版本的IE浏览器中，对匹配元素的ID，该方法不区分大小写

代码示例：

    
        
        
    
    
        
我是标题
    
    

3.3.1.2 document.getElementsByTagName()

根据标签名来获取元素

语法： node.getElementsByTagName(标签名称)

返回值： 返回多个同标签名的Element组成的集合

代码示例：

    
        
        
    
    
        
我是H1标签
        
我是H1标签
        
我是H1标签
        
我是H1标签
    
    

3.3.1.3 document.getElementsByName()

通过标签的name属性的值来获取元素,可能出现

语法： docuemnt.getElementsByName("name属性值");

返回值： 返回多个相同的name值的Element组成的集合

注意： 该方法存在严重的兼容性问题,在IE中,此方法还能获取ID属性匹配的值

代码示例：

    
        
        
    
    
        

            洗澡
            喝水
        
    
    

3.3.1.4 document.getElementsByClassName()

通过相同的class属性的值来获取元素

语法： document.getElementsByClassName(class属性值);

返回值： 返回多个相同的class属性值的Element组成的集合

代码示例：

    
        
        
    
    
        
我是H1标签
        
我是H2标签
        
我是H3标签
        
我是H4标签
    
    

3.3.1.4 querySelector()

通过CSS 选择器的放来来获取元素，

指定一个或者多个匹配的CSS选择器,id,class, 类型,属性

如果针对多个选择器,中间使用d"逗号分隔",

语法： document.querySelector("#demo")

返回值： 直接返回匹配到的第一个元素,如果没有找到则返回null

代码示例：

3.3.1.4 querySelectorAll()

HTML5引入的一种新的查找元素的方法

语法： document.querySelectorAll(".p_1")

返回值： 返回查找到的所有相同选择器的Element 集合

注意： 该方法不是实时返回的，只有调用的时候才会返回，因为这样开发人员通常可以利用伪类选择器( :hover ， :visited ) 去访问用户的浏览习惯等，所以现在很多浏览器不支持该方法

代码示例：

好了，说了上面一大推，篇幅有点长了，但是我觉得我还是要继续把下面几点说完

上面说了元素的获取的几种方法，那么现在我们可以获取到元素了，那么元素和元素之间的关系又是怎么样的？ 那么下面我们来说 元素节点之间的关系

3.3.2 HTML DOM 中节点的关系

我们学过HTML 的都知道 HTML元素之间的关系 有父子关系，和兄弟关系(同级元素)

那么在DOM中节点关系有以下几种

1. parent 父节点
2. child子节点
3. sibling 兄弟节点(同级节点)
4. root 根节点

如图所示：

• 父节点属性（parentNode）

  获取一个元素的父节点

  语法： node.parentNode

• 兄弟节点属性(sibling)

  同级节点属性又分为两个小的属性：

  ​ 上一个同级节点（previousSibling）

  ​ 获取某个元素的上一个同级节点

  ​ 语法：node.previousSibling

  ​ 下一个同级节点（nextSibling）

  ​ 获取某个元素的下一个同级节点

  ​ 语法 node.nextSibling

  因为在使用者两种方法获取到，可能含有

  中间的空格，又因为JavaScript 是一种弱类型语言，就衍生了下面的两种方法:

  ​ 上一个同级元素（previousElementSibling）

  ​ 获取某个元素的上一个同级元素

  ​ 语法：node.previousElementSibling

  ​ 下一个同级元素（nextElementSibling）

  ​ 获取某个元素的下一个同级元素

  ​ 语法 node.nextElementSibling

• 根节点 ( ownerDocument)

  获取某个元素的根元素

  语法：node.ownerDocument

  获取一个元素的根节点

    
        
        
    
    
        

            搜狐
DIV

                
            
            
        
    
    

• 子节点属性(ChildNodes)

  在这里要写的是三个小属性

  ​ 所有子节点（ChildNodes）

  ​ 用来获取一个元素的所有子节点

  ​ 返回值: 一个数组,只获取子节点,不能获取子节点的子节点

  ​ 语法：node.chilNodes

  ​ 第一个子节点（firstChild）

  ​ 获取元素的第一个子节点 ,如果匹配不到则返回null

  ​ 语法：node.firstChild

  ​ 最后一个子节点（lastChild）

  ​ 获取元素的最后一个子节点 ,如果匹配不到则返回null

  ​ 语法 node.lastChild

  因为在使用者两种方法获取到，可能含有

  中间的空格，又因为JavaScript 是一种弱类型语言，就衍生了下面的两种方法:

  ​ 第一个子元素（firstElementChild）

  ​ 获取某个元素的第一个子元素

  ​ 语法：node.firstElementChild

  ​ 最后一个子元素（lastElementChild）

  ​ 获取某个元素的最后一个子元素

  ​ 语法 node.lastElementChild

  代码：

  
  
    
        
        
    
    
        
  
            
            百度
            
  
                博客
            
            
        
    
    
  
  
  

  ​

有比比了好久，说了那么多的元素之间的关系，那么我们平时获取元素，不仅仅只是想获取到他的一下属性，了解他的关系吧，同样我们有事需要对元素进行操作，那么下面我们来说说对Node节点的操作

3.3.2 HTML DOM 中节点增加 删除 修改 创建

由于文章篇幅比较长了，大家也是不想看到我说一大推的废话了 那么我下面直接贴出代码 给大家看 在代码中我也是注释的比较清楚,以后再来修改

代码如下：

    
        
        
    
    
        

            
        
        
        

            
Java
            
C#
        
        点击添加一个新的首节点
        删除一个子节点
        替换首节点
        克隆整个列表
    
    

好了 看到这里 我的文章也就结束了，感谢您的浏览！

你们的支持，就是我前进的动力