APIS之DOM核心重点

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 () {

        }