DOM 2

Posted 2020-09-28 Hale.Proh

1. ***查找

   按选择器查找

2. 修改:

 

1. ***查找:

   按选择器查找:

     1. 如果只找一个:

        var elem=parent.querySelector("selector");

     2. 如果找多个:

        var elems=parent.querySelectorAll("selector");

     返回非动态集合(non-live collection):

            实际存储完整数据，反复访问，也不用重新查找DOM树

       优: 不会造成反复查找

 

 鄙视题: getElementsXXXX  vs  querySelector

   1. 返回值:

       getElements返回动态集合:

           优: 首次查找效率高

           缺: 可能造成反复查找DOM树

       querySelector返回非动态集合:

           优: 包含完整属性，无需反复查找DOM树

           缺: 首次查找效率低

    2. 易用性:

       querySelector更灵活, 且更简单

       getElements每次只能查找一种结果，无法设置查找条件

                            更繁琐

    总结: jQuery中:

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

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

 

2. 修改:

   内容:

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

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

           2件事: 1. 去掉了html标签

                      2. 将转义字符转换为正文

          何时: 如果希望去掉内容中的标签，仅获取文本内容时

          .textContent有兼容性问题: IE8不兼容

                 IE8: .innerText

   属性:

   样式:

 

 

 

1. 修改:

    属性:

    样式:

 

1. 属性:

    html标准属性:

       核心DOM: 万能

           1. 获取属性:

               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("属性名");

           

       HTML DOM: 仅对部分的简化

            elem.属性名

          强调: html中的class属性和ES中的class属性冲突

                 html中的class要改名为className

 

     特例: disabled    selected   checked

        不能用核心DOM操作！只能用html DOM打点操作

        attribute  vs  property

        attribute指出现在开始标签中的属性

        property保存在内存中的对象中的属性

        核心DOM只能操作出现在页面上的attribute属性

           无法操作未出现在页面上的内存中的property属性

        HTML DOM可访问内存中的property属性

 

   自定义属性:  2种:

     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属性

 

   内部/外部样式表:

 

补: .innerHTML只能获得封闭标签的内容

     表单元素的值只能用.value