DOM——基本组成与操作
　　DOM是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。他给文档提供了一种结构化的表达方式，可以改变文档的内容和呈现方式，我们最关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。所谓的DOM是以家族的形式描述HTML（父子节点和兄弟节点），那么，什么是DOM呢？我们可以从这几点解析一下：
  • DOM是document Object Model的缩写，简称文档对象模型（文档、模型）。这个对象就是document
  • DOM的结构（页面的结构）：树状结构，家族结构
  • DOM的组成（成员）：节点
  • DOM是js操作页面的一个入口对象
  • DOM可以将任何HTML和XML文档描绘成一个多层节点构成的结构
  • DOM结构中的每一个成分称为一个节点，节点分为几种不同的类型，每种类型都拥有各自不同的特点、数据和方法。每个节点与其他节点存在某种关系，所以节点之间的关系构成了层次。文档节点是每个文档的根节点。<html>元素是文档节点的子节点，被称为文档元素，每个文档只能有一个文档元素
  • 每一段标记都可以通过树中的一个节点来表示：元素通过元素节点来表示，特性通过特性通过特性节点来表示，文档通过文档节点来表示，而注释通过注释节点来表示，总能共有十二种类型，这些类型都继承自一个基类型。
  • HTML中，文档元素始终是<html>元素
  • XML中，没有预定义的元素，因此任何元素都可能成为文档元素
 
 
Node类型
　　Dom定义了一个Node接口，该接口由DOM中的所有节点类型实现，这个Node接口在JavaScript中是作为Node类型来实现的；除了IE以外，在其他所有浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型，因此所有节点都共享着相同的基本属性和方法。
常量
每个节点都有一个nodeType属性，用于表明节点类型。节点类型由在Node类型中定义的下列12个数值常量来表示：
  • Node.ELEMENT_NODE 　　                               //元素节点对应的常量，对应数字值1
  • Node.ATTRIBUTE_NODE 　　 　　                         //属性节点对应的常量，对应数字值2
  • Node.TEXT_NODE 　　                                //文本节点对应的常量，对应数字值3
  • Node.CDATA_SECTION_NODE 　　                          //CDATA区段对应的常量，对应数字值4
  • Node.ENTITY_REFERENCE_NODE 　　                        //实体引用元素对应的常量，对应数字值5
  • Node.ENTITY_NODE  　　                              //实体对应的常量，对应数字值6
  • Node.PROCESSING_INSTRUCTION_NODE  　　                   //表示处理指令对应的常量，对应数字值7
  • Node.COMMENT_NODE  　　                             //注释节点对应的常量，对应数字值8
  • Node.DOCUMENT_NODE  　　                            //最外层的根节点对应的常量，对应数字值9
  • Node.DOCUMENT_TYPE_NODE  　　                         //<!DOCTYPE………..>对应的常量，对应数字值10
  • Node.DOCUMENT_FRAGMENT_NODE 　　                       //文档碎片节点对应的常量，对应数字值11
  • Node.NOTATION_NODE  　　                            //DTD 中声明的符号节点对应的常量，对应数字值12
属性
  • 自身信息
nodeType属性（节点的类型）
因为nodeType属性有两种值，所以确定节点的类型有两种方式：
第一种是直接通过对应的常量进行比较判断，但在IE中无效：
<div id="box"></div>

<script type="text/javascript">

var oBox = document.getElementById("box");

if(oBox.nodeType == Node.ELEMENT_NODE){

    console.log("元素节点");

}else {

    console.log("不是元素节点");

}

</script>
第二种是通过对应的数字值进行比较判断，这种方式适用于所有浏览器：
<div id="box"></div>

<script type="text/javascript">

    var oBox = document.getElementById("box");

    if(oBox.nodeType == 1){

        console.log("元素节点");

    }else {

        console.log("不是元素节点");

    }

</script>
也就是常量和数字值是可以互换的，只不过数字值可以兼容各个浏览器。
 
nodeName（节点名字）、nodeValue（节点值）
要了解节点的具体信息，可以使用这两个属性。这两个属性完全取决于节点的类型。下面列出一些基本的对照表。
  • 节点关系
　　文档中的节点之间都存在这样或那样的关系，文档树就好比族谱，存在父子关系和兄弟关系。因为其他节点不能起名字（id、class之类的），所有节点中只有元素节点可以被直接获取，其他种类的节点只能通过获取到的元素节点间接获取，而节点关系就是完成这个操作的利器。
    • 父子关系
childNode属性（执父索子）
　　该属性中保存着一个NodeList对象。这是一个类数组对象，用于保存一组有序的节点，说是类数组，那么里面的元素当然是用数组的方式来读取，而且它也有一个length属性，但它并不能称为一个真正的Array实例。下面的例子展示了如何访问保存在NodeList中的节点——可以通过方括号，也可以通过item()方法。当然，因为索引访问的方式类似于数组，所以开发人员更青睐于方括号来获取。
<div id="box">

    <p>段落1</p>

    <p>段落2</p>

    <!--注释123-->

    <p>段落3</p>

</div>

<script type="text/javascript">

    var oBox = document.getElementById("box");

    var firstChild_1 = oBox.childNodes[0];

    var firstChild_2 = oBox.firstChild;

    var firstChild_3 = oBox.childNodes.item(0);

    var lastChild = oBox.lastChild;

    var count = oBox.childNodes.length;

    console.log("所有子节点：" , oBox.childNodes);

    console.log("第一个子节点：" , firstChild_1);

    console.log("第一个子节点：" , firstChild_2);

    console.log("第一个子节点：" , firstChild_3);

    console.log("最后一个子节点：" , lastChild);

    console.log("子节点的数量：" , count);

</script>

　　这个类数组会把空格和换行当成文本节点保存起来，所以除去三个段落标签和一个注释标签，它还保存了五个由空格和换行组成的文本节点。这个例子是在一个节点有子节点的情况下，所以有必要提供一个检测函数hasChildNodes()来判断一个节点是否有子节点，如果有的话，它返回true，反之为false，这比查询childNodes列表的length属性有效多了。
 
parentNode属性（执子索父）
我们都知道一个父亲可以有多个亲生儿子，但是儿子却只能有一个亲生父亲。所以childNode属性返回的是一个包含了多个节点的类数组，而parentNode属性只返回一个节点。
<div id="box">

    <p class="p1">段落1</p>

    <p>段落2</p>

    <!--注释123-->

    <p>段落3</p>

</div>

<script type="text/javascript">

    var oP= document.getElementsByClassName("p1")[0];

    var parent = oP.parentNode;

    console.log("父节点为：" , parent);

</script>
 
    • 兄弟关系
除了操作父子关系用到的属性，每个节点还提供了操作兄弟关系的属性。
 
previousSibling属性（前一个兄弟节点）、nextSibling属性（后一个兄弟节点）
<div id="box">

    <p class="p1">段落1</p>

    <span></span>

    <h1>段落2</h1>

    <!--注释123-->

    <p>段落3</p>

</div>

<script type="text/javascript">

    var oP= document.getElementsByClassName("p1")[0];

    var preSibling = oP.previousSibling;

    var nextSibling = oP.nextSibling;

    console.log("前一个兄弟节点为：" , preSibling);

    console.log("后一个兄弟节点为：" , nextSibling);

</script>

特殊的，第一个节点的previousSibling属性和最后一个节点的nextSibling属性都为null
 
 总结
（1）DOM由各种类型的节点组成
（2）每种节点都有其对应的属性值（类型、名字以及值）
（3）每个节点都可以由其他节点用父子关系和兄弟关系检索并获取
 

剑指前端（前端入门笔记系列）——DOM（基本组成与操作）的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 《剑指offer》解题笔记

    <剑指offer>解题笔记 <剑指offer>共50题,这两周使用C++花时间做了一遍,谨在此把一些非常巧妙的方法.写代码遇到的难点.易犯错的细节等做一个简单的标注,但不会太过 ...

  3. 剑指Offer——Java实现栈和队列的互模拟操作

    剑指Offer--Java实现栈和队列的互模拟操作 栈模拟队列   题目:JAVA实现用两个栈来实现一个队列,完成队列的Push和Pop操作.队列中的元素为int类型.   思路:其实就是把队列正常入 ...

  4. 《剑指offer》读书笔记

    二叉树 重建二叉树 面试题6:(p55) 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树. 假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1, 2, 4 ...

  5. 剑指前端（前端入门笔记系列）——DOM（元素大小）

    DOM——元素大小   DOM中没有规定如何确定页面中与元素的大小,IE率先映入了一些属性来确定页面中元素的大小,以便开发人员使用,目前,所有主要的浏览器都已经支持这些属性了.   1.偏移量(单位为 ...

  6. 剑指前端（前端入门笔记系列）——DOM（属性节点）

    DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...

  7. 剑指前端（前端入门笔记系列）——DOM（元素节点）

    DOM(元素节点) 本文介绍了元素节点的基本操作:增删改查   增 新增一个元素节点分为两步(二者缺一不可),第一步:创建元素节点,第二步:将创建的元素节点插入到指定元素节点中(也就是插入指定元素节点 ...

  8. 剑指前端（前端入门笔记系列）—— JS基本数据类型及其类型转换

    基本数据类型 ECMAScript中有5中简单数据类型性(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——Object,Obje ...

  9. 剑指前端（前端入门笔记系列）——BOM

    BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些 ...

随机推荐

  1. 如何修改dedecms专题目录默认名称special

    专题有一个聚合的效果,一般会比普通的文章页更符合用户需求.如果用dedecms建专题的话,默认的目录是special,怎么修改修改dedecms专题目录名称呢,比如将/special/改为/s/这样更 ...

  2. 编程语言及python介绍

    编程语言及python介绍 1.编程语言分类 机器语言 优点:执行效率高 缺点:开发效率极低,跨平台性差 汇编语言 优点:较机器语言执行效率稍低 缺点:较机器语言开发效率稍高,仍然很低,跨平台性差 高 ...

  3. HTML元素脱离文档流的三种方法

    一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...

  4. 格利文科定理（Glivenko–Cantelli Theorem）

    格利文科定理:每次从总体中随机抽取1个样本,这样抽取很多次后,样本的分布会趋近于总体分布.也可以理解为:从总体中抽取容量为n的样本,样本容量n越大,样本的分布越趋近于总体分布. (注:总体数据需要独立 ...

  5. UDF——文件编码造成UDF编译失败

    有时候我们觉得我们的代码写得很正确的,但是在Fluent当中编译的时候一直编译不通过,提示我们错误,我们根据Fluent当中的错误提示去找到源代码中对应的行,却发现没有错误提示当中的问题,出现这个问题 ...

  6. 小端存储转大端存储 & 大端存储转小端存储

    1.socket编程常用的相关函数:htons.htonl.ntohs.ntohl h:host   n:network      s:string    l:long 2.基本数据类型,2字节,4字 ...

  7. linux quota磁盘限额，引发的rename系统调用 errno:18 - Invalid cross-device link

    起因: log4j日志滚动失败,debug发现jvm调用native方法rename失败,也就是系统调用rename失败. 自己写c程序系统调用rename,证实确实是这个问题. 日志打在容器里,日志 ...

  8. 【2019年05月07日】A股最便宜的股票

    新钢股份(SH600782) - 当前便宜指数:193.2 - 滚动扣非市盈率PE:2.99 - 滚动市净率PB:0.87 - 动态年化股息收益率:1.68%- 新钢股份(SH600782)的历史市盈 ...

  9. [C++基础] 数组、指针、内存篇

    一.数组 2.1 int a[2][2]= { {1}, {2,3} },则 a[0][1] 的值是多少? 二维数组的初始化一般有两种方式: 第一种方式是按行来执行,如int array\[2][3] ...

  10. YYCache 的整体架构类图