zoukankan      html  css  js  c++  java
  • DOM扩展

    <!-- 
            选择符api:
                通过css选择器来选择
                querySelect()
                querySelectAll()返回一个nodelist实例,同样可以使用nodelist中的方法来找寻元素

                matchesSelector()
                    使用这个方法检测元素是否被querySelect()和querySelectorAll()返回,浏览器支持性不好
         -->
         <!-- 
             元素遍历(一下五个方法兼容ie9+)
             childElementCount()返回子元素个数(不包括文本节点和注释)
             firstElementChild() firstChild的元素版
             lastElementChild() lastChild的元素版
             previousElementSibling() previousSibling的元素版
             nextElementSibling() nextSibling的元素版
             注意:ie9之前那版本不会返回文本节点,其它浏览器会返回文本节点也就是空格,导致了行为不一致
          -->
          <!--
             HTML5:
                getElementsByClassName() ie9+
                辅助焦点管理:
                  document.activeElement属性
                        var button = document.getElementById('button');
                        button.focus();
                        alert(document.activeElement === button); // true
                  document.hasFocus()方法确定文档中是否获得了焦点 ie4+
                        var button = document.getElementById('button');
                        button.focus();
                        alert(doxument.hasFocus())  // true检测用户是否再交互
                插入标记:
                    innerHTML属性
                    outerHTML属性
                    insertAdjacentHTML()
                        参数:接收两个参数插入位置和插入文本
                        beforebegin: 当前元素之前插入一个紧邻的同辈元素
                        afterbegin: 当前元素之下插入一个子元素或者再第一个元素之前再插入新的子元素
                        beforeend: 再当前元素之下插入一个新的子元素或者再最后一个元素之后再插入新的子元素
                        afterend: 再当前元素之后插入一个紧邻的同辈元素
                性能问题:
                    上述替换子节点的方法会导致浏览器的内存占用问题,假如某个元素绑定有事件处理函数,当删除节点后内存依然保存有该函数
                children属性
                    包含元素中同样还是元素的子节点

                检测是否包含某个子节点;
                    contains()
                    document.documentElement.contains(document.body)
                插入文本(火狐不支持)
                    innerText
                    outerText
                    textContent(火狐支持的)
                    

           -->
  • 相关阅读:
    perl 解json数组
    华为云3大体系化防护实践,保障金融业云上数据安全
    弹性文件服务解密 -- 块存储、文件存储、对象存储的区别
    【nodejs原理&源码赏析(6)】深度剖析cluster模块源码与node.js多进程
    云+AI+5G时代,华为云已准备好多元化云服务架构
    高能街访 | 为什么他们都纷纷为深圳打Call?
    Angularjs进阶笔记(2)—自定义指令中的数据绑定
    Angularjs进阶笔记(1)—不同类型的双向数据绑定
    ServiceComb java-chassis和CSE java-chassis的区别
    使用inspector功能查看和管理契约
  • 原文地址:https://www.cnblogs.com/xu3241/p/13669228.html
Copyright © 2011-2022 走看看