javascriptDOM笔记(一)

正课:

1. 什么是DOM:

2. ***DOM Tree:

3. 查找:

1. 什么是DOM:

  js:ES(核心语法 9)+

     DOM(专门操作网页内容的API 3)+

     BOM(专门操作浏览器窗口的API 2)

  

  鄙视题： HTML XHTML DHTML XML

  HTML: 专门编写网页内容的语言

  XHTML: 更严格的XHTML标准

  DHTML: 一切可以实现网页动态效果的技术的统称。

    包含:HTML+CSS+JS

  XML: 专门存储和传输格式化数据的结构化文档。

    <student id="1001">    
<name>范冰冰</name>

        <math>89</math>

        <chs>65</chs>
<eng>91</eng>

    </student>

    JSON: 

    '{"name":"范冰冰","math":89,...}'

什么是DOM: 专门操作网页内容的API

  3种API: 

   1. 核心DOM: 万能的。可操作一切结构化文档。 包括: HTML  XML

     问题: API繁琐

     解决:

   2. HTML DOM: 对核心DOM中*部分*常用的API，提供的简化版本。——不是万能

       专门操作HTML网页内容的API

     实际开发中:选最简单用。

           如果简单的无法实现，就用会用的

   3. XML DOM: 专门操作XML文档的API

     

2. ***DOM Tree:

 什么是DOM树: 网页的所有内容，在内存中其实是以树形结构存储的。

   何时创建: 当浏览器读取到html内容时，自动创建DOM树。

   如何创建: 

    1. 读到html文档时，先创建根节点对象：

      document 查找元素，创建元素

    2. 开始顺序读取html文档的内容，创建子节点。

    网页中一切内容，都是DOM树上的节点对象

 节点对象: Node 所有节点对象的父类型

   三大属性: 

   node.nodeType: 节点的类型

    何时使用: 判断或区分节点的类型时

    如何使用: 值是数字

      document: 9

      元素节点: 1

      属性节点: 2

      文本节点: 3

      DOCTYPE: 10

    问题: nodeType无法细致的区分每种元素

   node.nodeName: 节点的名称:

      何时使用: 判断或区分节点名时 

          更多用于细致区分每种元素标签名

      document: #document

      元素节点: 标签名 (全大写)

      属性节点: 属性名

      文本节点: #text

      DOCTYPE:  html

   node.nodeValue: 节点的值

       何时使用: 只用于获得属性的值和文本的内容

      document: null

      元素节点: null

      属性节点: 属性值

      文本节点: 文本内容

      DOCTYPE:  null

  

 节点间关系:2大类：

  节点树: 包含所有节点的树结构

    任何文本，也是节点

    所以，节点树，会受到看不见的空文本的干扰

  1. 父子关系: 4个:

   elem.parentNode => 获得elem的父节点       elem.childNodes ->类数组对象
=> 获得elem的所有*直接*子节点 

   elem.firstChild 
=> 获得elem的第一个子节点

   elem.lastChild

        => 获得elem的最后一个子节点

  2. 兄弟关系: 2个:

   elem.previousSibling 

        => 获得elem的前一个兄弟节点

   elem.nextSibling

        => 获得elem的后一个兄弟节点

  何时使用: 站在现有节点，查找周边节点

    建议，查找节点要就近。

  元素树:仅包含元素节点的树结构

    不是一颗新的树，仅是节点树的子集。

    优: 仅包含元素节点，不受空文本的干扰

    缺: 无法访问文本节点

      变通: elem.innerHTML

   包括: 2大类:

        节点树        元素树

     parentNode    parentElement 没有node

     childNodes      children

     firstChild    firstElementChild

     lastChild     lastElementChild

  previousSibling  previousElementSibling

     nextSibling   nextElementSibling

   

  递归遍历: 遍历指定父节点下的所有子节点

   2步: 

   1. 先定义函数，仅遍历直接子节点

   2. 对每个直接子节点，再次调用当前遍历函数本身。

  childNodes: 返回所有直接子节点对象，保存在一个类数组对象中。

    动态集合: 不实际存储对象的完整属性，      问题：每次访问动态集合时，都会反复去DOM树查找。    解决: 遍历，首先将length属性的值，保存在变量中。用变量作为循环的条件

  深度优先：每次都优先遍历子节点。
      所有子节点遍历完毕，再遍历兄弟节点

正课:

1. DOM Tree

  遍历API:

2. 查找:

1. DOM Tree

  遍历API: 

  1. NodeIterator: 按照深度优先的原则，依次读取指定父节点下的每个节点

    如何使用: 2步:

     1. 创建NodeIterator对象:

 var iterator=
document.createNodeIterator(
  parent,NodeFilter.SHOW_ALL

                            .SHOW_ELEMENT

           null,false

        );

     2. 反复调用:

       var currNode=iterator.nextNode();

       //让iterator跳到下一个节点

       到头返回null

       强调: 调用一次nextNode，只向前跳一个节点。

     iterator.previousNode();

     退一个节点

  2.TreeWalker:基本用法和NodeIterator完全一样。

    强调: 1.不遍历根节点，只遍历子节点

         2. 又提供了向四周跳转的方法:

          walker.parentNode();

                .firstChild();

                .lastChild();

                .previousSibling();

                .nextSibling(); 

2. 查找:

  DOM: 查找，修改，创建和删除

  1. 按HTML属性查找: 

    1. 按id查找一个元素:

  var elem=document.getElementById("id")

      强调: ById只能用在document对象上

    2. 按标签名查找多个子元素:

  var elems=

    parent.getElementsByTagName("标签名")

      强调: 1.ByTagName可用在任意父元素上

            2.ByTagName不止查询直接子节点，且查询所有后代节点。

    3. 按class属性查找: 

  var elems=

   parent.getElementsByClassName("class")

    4. 按name属性查找:

  var elems=

   parent.getElementsByName("name");

   

   强调: 即使返回一个元素，也会放在集合中返回。必须加[0]，才能去除唯一一个元素

   

   返回值elems: 动态集合

  2. 用选择器查找: Selector API

                   jQuery的核心

   1. 找1个: 

     var elem=

      parent.querySelector("selector");

   2. 找多个: 

     var elems=

     parent.querySelectorAll("selector");

   强调: elems非动态集合

        不会导致反复遍历DOM树

    何时使用: 如果需要多次getxxx才能找到目标元素时

      不适合使用: 基于现有节点向上或向周围爬树时

   鄙视题: getXXX vs Selector API

   效率: getXXX的效率 比 SelectorAPI高！

       因为getXXX返回动态集合，不需要准备所有数据就可返回结果。——快

       selectorAPI，准备好所有相关数据，再返回。——慢

   返回值: getXXX -> 动态集合，可能造成反复遍历DOM树

           selectorAPI -> 非动态集合,不会导致反复遍历DOM树

   

   如何选择: 

     如果一次getXXX查找即可找到结果时，首选getXXX

     如果需要多次getXXX才能找到目标元素时，首选selectorAPI

 不需要查找，可直接获得的元素:

   document.body  ->  <body>

   document.head  ->  <head>

   document.documentElement -> <html>