【学习笔记】DOM Unit01-DOM概述 、 DOM树 、 选取元素

• DOM概述：
  DHTML：动态HTML技术——凡是能够实现动态效果的技术
  DHTML=HTML+CSS+JS

  HTML XHTML DHTML XML
  HTML：超文本标记语言，专门编写网页内容的语言
  XHTML：严格的HTML标准
  DHTML：动态HTML技术，是HTML+CSS+JS的统称
  XML：可扩展的标记语言，标签名和属性名可自定义！

              <student>                   <name id="fbb">范冰冰</name>                   <math>91</math>                     <chs>65</chs>                    <eng>95</eng>                </student>

XML基本被JSON代替

    JSON：JavaScript Object Notation          '{"name":范冰冰,"math":91,"chs":65,"eng":95}'

BOM和DOM：window对象：2个角色：      1. 代替了ES标准中Global，充当全局对象      2. 封装当前浏览器窗口的功能和属性——BOMBOM：Browser Object Model——专门操作浏览器窗口的API    包括：浏览器窗口的属性和功能    缺点：没标准——兼容性差DOM：Document Object Model——专门操作网页内容的API    包括：.html网页中编写的一切内容和属性    优点：有国际标准，所有浏览器几乎100%兼容   Document其实不仅指网页，而是指一切自描述的结构化文档。比如：XMLDOM API：2大类：    1. 核心DOM：通用API，即可以操作HTML文档，也可以操作XML文档。              优点：可以对文档内容做任何操作！              缺点：API操作繁琐    2. HTML DOM：DOM Level2，提供了专门操作网页内容的简化版API。但仅对复杂HTML元素进行了简化。              优点：API简单              缺点：不能完成所有操作，都需要核心DOM补充    开发：优先使用HTML DOM，再用核心DOM API补充

• ***DOM Tree
  网页的加载过程：
  Browser Server

  1. 浏览器send request： –> 查找请求的.html页面

  2. 创建Document对象 <–.html<–返回response

  3. 读取HTML内容在Document对象下搭建DOM Tree
     JQuery

  4. 请求外部css文件: –> 查找请求的.css文件
     <–.css <– 返回response

  5. 将样式设置到DOM Tree
     的节点对象上
     同时，计算对象间的大小和位置：layout(reflow)
     生成Render Tree——加载完样式后的树

  6. 浏览器绘制界面
     window.onload

     根节点：document对象
     Node类型：所有节点对象的父类型
     三大通用属性：
     1. nodeType：当前节点的类型——返回的是数字
     DOCUMENT_NODE : 9
     ELEMENT_NODE : 1
     ATTRIBUTE_NODE : 2
     TEXT_NODE : 3
     何时使用：判断获得的节点的类型时

     2.  - nodeName：节点名称           document  :  “#document”           ELEMENT :  "全大写标签名"           ATTRIBUTE : "属性名"           TEXT : "#text"        何时使用：判断获得的元素节点的标签名时         if(obj.nodeName=="INPUT")3.  - nodeValue : 节点值——对元素节点无效        ATTRIBUTE : "属性值"        TEXT : “文本内容”

     DOM Tree 节点间关系：2组：

     1. 父子关系：parentNode childNodes firstChild lastChild
     2. 兄弟关系：previousSibling nextSibling

     **问题1：除了parentNode外，其余都会受到看不见的空字符(回车，空格，制表符)的影响。空字符也是文本节点！
     **问题2：childNodes：返回NodeList类型的类数组对象
     包含了父节点下的所有直接子节点对象
     动态集合：仅包含节点对象的引用，不包含实际属性值！每次访问结合的属性时，都要重新查询DOM树
     遍历childNodes：
     效率低：for(var i=0;i