• Dom的一些扩展


    querySelector

    该方法接受一个css选择符,如果没有匹配的元素则返回null。

    元素遍历

    Element Traversal API为Dom元素添加了5个属性:

    childElementCount  firstElementChild  lastElementChild  previousElementSibling  nextElementSibling

    HTML5中

    classList属性:

    该属性可以运用4个方法:

    add  contains(表示列表中是否存在给定的值,存在返回true,否则返回false) remove   toggle(如果列表中给定值则删除,没给定则添加)

    <html>
    <style>
    	.node2{
    		color:red
    	}
    </style>
    <body>
    <div class="node1 node2">123</div>
    </body>
    <script type="text/javascript">
    
    	var dothing=function (){
    		var object=document.querySelector(".node1")
    		object.classList.remove("node2")
    	}
    	setTimeout(dothing,5000)
    
    </script>
    </html>
    

      当不存在classList的时候可以进行添加

    if (!("classList11" in document.documentElement)) {
        Object.defineProperty(HTMLElement.prototype, 'classList11', {
            get: function() {
                var self = this;
                function update(fn) {
                    return function(value) {
                        var classes = self.className.split(/s+/g),
                            index = classes.indexOf(value);
    
                        fn(classes, index, value);
                        self.className = classes.join(" ");
                    }
                }
    
                return {
                    add: update(function(classes, index, value) {
    					
                        if (!~index) classes.push(value);
                    }),
    
                    remove: update(function(classes, index) {
                        if (~index) classes.splice(index, 1);
                    }),
    
                    toggle: update(function(classes, index, value) {
                        if (~index)
                            classes.splice(index, 1);
                        else
                            classes.push(value);
                    }),
    
                    contains: function(value) {
                        return !!~self.className.split(/s+/g).indexOf(value);
                    },
    
                    item: function(i) {
                        return self.className.split(/s+/g)[i] || null;
                    }
                };
            }
        });
    }
    

      焦点管理

    document.activeElement 属性始终会引用DOM中当前焦点的元素

    document.hasFocus()方法用于确定文档是否获得了焦点

    插入文本

    innerText属性,操作元素中包含的所有的文本内容

    兼容性

    function getInnerText(element)
    {
    	return (typeof element.textContent=="string")?
    	element.textContent:element.innerText;
    }
    
    function setInnerText(element,text)
    {
     if(typeof element.textContent == "string")
     {
    	element.textContent = text;
     }
     else
     {
    	element.innerText = text;
     }
    }
    

      滚动

    scrollIntoView() 是唯一一个错有连蓝旗都支持的方法,因此还是这个方法最常用

  • 相关阅读:
    tricky c++ new(this)
    MCI使用
    LoadIcon的使用
    深入浅出Node.js (2)
    洛谷 P1464 Function
    洛谷 P1722 矩阵 II
    洛谷 P1036 选数
    洛谷 P1303 A*B Problem
    洛谷 P2694 接金币
    洛谷 P1679 神奇的四次方数
  • 原文地址:https://www.cnblogs.com/ouzilin/p/8628520.html
Copyright © 2020-2023  润新知