zoukankan      html  css  js  c++  java
  • 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() 是唯一一个错有连蓝旗都支持的方法,因此还是这个方法最常用

  • 相关阅读:
    Eureka的使用
    自定义类加载器
    继承
    Active Objects模式
    Future设计模式
    mysql备份与还原
    多生产者多消费者(第一种方式),基于synchronized,wait,notifyAll
    自己实现阻塞队列(基于数组)
    linux定时任务每隔5分钟向文本追加一行
    自己实现CountDownLatch
  • 原文地址:https://www.cnblogs.com/ouzilin/p/8628520.html
Copyright © 2011-2022 走看看