DOM-查找和修改

1. 查找:

 按HTML查找:

  问题: 每次只能按一个条件查找，如果查找条件复杂，则步骤很繁琐

  解决: 选择器:

 按选择器查找: 2个API

  1. 只查找一个元素:

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

  2. 查找多个元素;

   var elems=parent.querySelectorAll("选择器");

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

         返回非动态集合: 实际存储属性值，即使反复访问集合，也不会反复查找DOM树

            优: 不会反复查找DOM树

            缺: 首次查找速度慢

         兼容性受制于浏览器的要求

 鄙视: 按HTML查找 vs 按选择器查找

  1. 返回值: 按HTML查找，返回动态集合

            按选择器查找，返回非动态集合

  2. 首次查找效率: 按HTML查找，快

                  按选择器查找，慢

  3. 易用性: 按HTML查找， 繁琐
            按选择器查找， 简洁

  总结: 如果只靠一个条件，就可找到想要的元素时，首选按HTML查找。

        如果查找条件复杂时，首选按选择器查找

2. 修改: 3种:

 内容: 3种:

  1. 开始标签到结束标签之间的原始HTML代码片段

    .innerHTML

  2. 开始标签到结束标签之间的纯文本正文

    .textContent   IE8: .innerText

    多做2件事: 1. 去掉所有内嵌标签;

               2. 转义字符翻译为正文;

  3. 表单元素的内容/值:  .value

 属性: 3种:

  1. HTML标准属性: HTML标准中规定的字符串类型的属性

   2种:

    1. 核心DOM API:

     获取一个属性节点: 所有属性节点都保存在元素的attribute集合中

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

       var value=attr_node.nodeValue;

     获取属性值: elem.getAttribute("属性名")

     修改属性值: elem.setAttribute("属性名","属性值")

     判断是否包含属性: elem.hasAttribute("属性名")

     移除属性: elem.removeAttribute("属性名")

     特点: 优: 万能

           缺: 繁琐

    2. HTML DOM API: 专门操作HTML文档的简化版API

     这是对部分API进行了简化

     特点: 优: 简单

           缺: 不是万能

     HTML DOM将所有标准属性，都提前预定义在了元素对象上。可用.直接访问。默认值都是""。

      获取属性值: elem.属性名

      修改属性值: elem.属性名=属性值

      判断是否包含属性: elem.属性名!==""

      移除属性: elem.属性名=""

     特例: .class属性 要更名为 .className

  2. 四大状态属性: enabled   disabled   checked  selected

   因为不是字符串类型，所以不能用核心DOM API访问

   只能用HTML DOM打.访问

  3. 自定义扩展属性:

   什么是: 开发人员在开始标签中添加的自定义的属性

   何时: 2种:

    1. 临时就近缓存业务数据，避免反复请求服务端

    2. 代替class，批量选择多个元素

   如何: 2种:

    1. <ANY 自定义属性名="值"

      获取自定义属性的值: 核心DOM的万能API

       ANY.getAttribute("自定义属性名");

       ANY.setAttribute("自定义属性名","值")

      强调: 不能用HTML DOM的.访问

      查找: 属性选择器[自定义属性名=值]

    2. HTML5: <ANY  data-自定义属性名="值"

     获取或修改时: ANY.dataset.自定义属性名

      查找: 属性选择器[data-自定义属性名=值]

 样式: 2种:

  1. 内联样式:  elem.style.css属性="值"

    强调: css属性必须去横线变驼峰

      list-style-type -> listStyleType

      background-color -> backgroundColor

    获取完整样式:

     错误: elem.style  只能获得内联样式

     正确: 获得计算后的完整样式

       var style=getComputedStyle(elem)

    总结: 只要修改元素的样式,都用elem.style

         只要获得样式，都用getComputedStyle

    强调: getComputedStyle获得的计算后的样式是只读

          因为属性的来源和共享范围不确定

  2. 内部样式表/外部样式表:

   3步:

   1. 获得样式表对象:

    var sheet=document.styleSheets[i]

   2. 获得CSSRule对象: 样式表中每个{}

    var rule=sheet.cssRules[i]

    说明: 如果rule是keyframe，则还需要继续向下找一级

   3. 获得CSSRule对象中的css属性值

    var value=rule.style.css属性

  问题: 每个elem.style.css属性只能修改一个css属性

     如果批量应用/撤销多个样式时，代码会很繁琐

  解决: 今后，只要批量修改样式，都用class属性