DOM总结

DOM:

1. 初学DOM主要是一些操作标签的增删改查方法，最主要的就是查：

1. 查的重点在于要会写选择器：

a) 选择器：

1. 兄弟选择器

a) 选择器1+选择器2{}--------------à相邻兄弟

b) 选择器1~选择器2{}--------------à某元素后面的所有兄弟

2. 属性选择器

a) 元素[属性=值]

b) 元素[class~=值]

c) 元素[属性^=值]

d) 元素[属性$=值]

e) 元素[属性*=值]

3. 伪类选择器

a) 目标伪类：:target  匹配当前页面中活动的HTML锚元素

b) 元素状态伪类： 

i. :enabled 匹配每个已启用元素(表单控件)

ii. :disabled 匹配每个已禁用元素(表单控件)

iii. :checked 匹配每个被选中的元素(radio,checkbox)

c) 结构伪类

i. :first-child  属于父元素的首个子元素

ii. :last-child  属于父元素中的最后一个子元素

iii. :nth-child  属于其父元素的第n个子元素

iv. :empty    匹配没有子元素（包含文本）的每个元素

v. only-child  匹配属于其父元素中的唯一子元素

d) 否定伪类

i. :not(选择器)  将满足选择器的元素从指定范围中排除

4. 伪元素选择器

a) :first-letter  首字符

b) :first-line    首行

c) :selection    用户选取

d) :before     某元素的内容区域之前

e) :after       某元素的内容区域之后

2.接下来要谨记：

document对象：整棵树的根节点

Node对象是document的子代节点

节点类型nodeType

document

element

attribute

text

节点名nodeName

#document

标签名

属性名

#text

节点值nodeValue

Null

Null

属性值

文本内容

 

 

 

 

 

 

节点树

元素树

父子关系

elem.parentNode

返回一个父节点对象

elem.parentElement

返回一个父元素对象

elem.childNodes

返回子节点对象的集合

elem.children

返回子元素对象的集合

elem.firstChild

返回第一个子节点对象

elem.firstElementChild

返回第一个子元素对象

elem.lastChild

返回最后一个子节点对象

Elem.lastElementChild

返回最后一个子元素对象

兄弟关系

elem.previousSibling

返回当前节点的前一个兄弟节点

Elem.previousElementSibling

返回当前节点的前一个兄弟元素

elem.nextSibling

返回当前节点的下个兄弟节点

Elem.nextElementSibling

返回当前节点的下个兄弟元素

 

3.还有两个比较重要的查找节点方法：

var elem=document.getElementById(“id”);

var elem=parent.getElementsByTagName(“标签名”);返回的是所有子节点集合

4.选择器查找节点：

var elem=parent.querySelector(“选择器”);

var elems=parent.querySelectorAll(“选择器”); 返回的是非动态集合,缺点：首次比较慢。优点：无需反复查找DOM树

5.动态集合和非动态集合区别：

elem.childNodes、elem.children à动态集合：

缺点：可能造成反复查找DOM树。

优点：首次查找效率高。

不实际储存元素和属性值每次访问集合都需要重新查找DOM树。

遍历动态结合:

        错误: for(var i=0;i<children.length;i++)

           后果,循环了几次，就重复查找了几次DOM树

        解决: for(var i=0,len=children.length; i<len; i++)

           仅在循环开始时查找一次DOM树，将值另存为在len中

6.遍历：

递归遍历: 查找指定父节点下所有子代节点——鄙视题 手写

      如何: 2步:

         1. 先遍历所有直接子节点

         2. 在遍历直接子节点时，对每个子节点调用和父节点完全相同的方法。

      算法: 深度优先遍历: 每次都优先遍历子节点，所有子节点遍历完，才返回遍历兄弟节点

      递归的效率: 极低。

      解决: 绝大多数递归都可用循环代替

      遍历API: 每次仅遍历下一个节点，可用循环反复执行(了解)

        1. 节点迭代器:

           如何: 2步:

             1. 创建迭代器对象:

var iterator=

document.createNodeIterator(parent,NodeFilter.SHOW_ALL,null,false.SHOW_ELEMENT);

             2. var 原先的节点对象=iterator.nextNode(); 跳到下一个节点

  如果返回null，说明到头了

内置的就是深度优先遍历算法。

 

总结: jQuery中:

       如果一次查找就能找到元素时，首选getElements

       如果查找条件复杂时，就用querySelector

 

 

其次就是修改：

查找到元素节点对象后，可以用以下两种属性进行修改：

1 .innerHTML: 获取或设置元素开始标签到结束标签之间的html代码片段。

2 .textContent: 获取或设置元素开始标签到结束标签之间的纯文本内容。IE8: .innerText

查找一个标签元素的属性：

1.获得属性节点对象: (了解)

                var attrNode=elem.attributes[i/属性名];

                           elem.getAttributeNode("属性名");

                attrNode.value

2. 直接获得属性值:

                var value=elem.getAttribute("属性名");

2. 设置属性:

                elem.setAttribute("属性名",新值);

3. 判断是否包含指定属性:

                var bool=elem.hasAttribute("属性名")

4. 移除属性:

                elem.removeAttribute("属性名");

 

 

自定义属性:

1. 只能用核心DOM访问，不能用html访问

     2. HTML5: ——兼容问题

        所有自定义属性: 属性名必须: data-属性名

        访问时: elem.dataset.属性名

    何时: 1. 在客户端网页中临时缓存部分业务数据

2. 代替id和class作为查找元素的条件

 

2. 样式:

   内联: elem.style.css属性名

     强调: 所有css属性都要去横线变驼峰

        background-color -> backgroundColor

        list-style-type -> listStyleType

   问题1: 只能获得/设置内联样式

           无法获取最终应用到元素上的完整样式

   解决:

      如果设置一个元素的样式: elem.style.css属性名

          因为: 优先级最高！不影响其他元素

      如果获取一个元素的样式: 不用style

          getComputedStyle(elem).css属性名

   问题2: elem.style.css属性名一句话只能设置一个样式

             如果需要同时设置一个元素的多个css属性，代码繁琐

   解决: 今后只要操作一个元素的样式，都用class属性批量操作

     特例: 精确控制动画效果时，需要操作单个css属性

 

 

1. 添加/删除元素:

  添加: 3步:

     1. 创建新的空元素:

         var a=document.createElement("a");

         相当于: <a></a>

     2. 设置元素的关键属性:

         a.href="http://tmooc.cn"

         a.innerHTML="Go to tmooc";

         相当于: <a href="http://tmooc.cn">go to tmooc</a>

     3. 将元素添加到DOM树上:

         3种:

         1. 末尾追加: parent.appendChild(a)

         2. 插入在一个现有元素之前:

               parent.insertBefore(a,oldElem)

3. 替换现有元素: parent.replaceChild(a,oldElem)

 

多个平级元素添加：

何时: 如果同时添加多个平级元素时，都要先将平级元素添加到文档片段中。再将文档片段一次性添加到DOM树

     如何:

           1. 创建文档片段:

              var frag=document.createDocumentFragment();

           2. 将子元素添加到frag中: frag.appendChild(child)

           3. 将frag添加到DOM树: parent.appendChild(frag)

               frag将子元素添加到DOM树后，自动释放。

 

删除元素: 1. 先找到要删除的元素对象elem

         2. parent.removeChild(elem)

        elem.parentNode.removeChild(elem);