APIS之DOM核心重点

怼烎@ 2022-11-20 04:53 145阅读 0赞

## DOM重点核心：*创建、增、删、改、查、属性操作、事件操作* ##

创建：

document.write();
    		元素.innerHTML = '';
    		元素.document.createElement('')

增：

父元素.appendChild();  //父元素.appendChild(子元素); 尾部添加
    		父元素.insertBefore(); //父元素.insertBefore(子元素, 父元素.children[0]); 从头部添加

删：

父元素.removeChild();
    		//循环删除所有子节点举例
    		//for (var i = 0; i < 子元素.length -1; i++) { 
    	        //1、abc.removeChild(abc.children[0]); 从头部开始删除
    	        //2、abc.removeChild(abc.children[abc.children.length - 1]); 从尾部开始删除
            //}

改：

abc.style.display = 'none'; //样式修改等等

查：

var abc = document.querySelector('abc');
    	    var abc = document.querySelectorAll('abc');
    	    abc.parentNode;
    	    abc.children[0];
    	    abc.previousElementSibling;
    	    abc.nextElementSibling;

属性操作：

//循环设置自定义属性
    	    for (var i = 0; i < mLis.length; i++) { 
    	        mLis[i].setAttribute('data-index', i);
    	    }
    	    //循环获取自定义属性
    	    for (var i = 0; i < mLis.length; i++) { 
    	        mLis[i].getAttribute('data-index');
    	    }
    	    //循环移除自定义属性
    	    for (var i = 0; i < mLis.length; i++) { 
    	        mLis[i].removeAttribute('data-index');
    	    }

事件操作：

abc.onclick  = function () { 
    
            }
            abc.onmouseover  = function () { 
    
            }
            abc.onmouseout  = function () { 
    
            }
            abc.onmousemove  = function () { 
    
            }
            abc.onmousedown  = function () { 
    
            }
            abc.onmouseup  = function () { 
    
            }
            abc.onfocus  = function () { 
    
            }
            abc.onblur  = function () { 
    
            }