# 選中Element的方式 1、getElementById() 2、getElementsByClassName() 3、getElementsByTagName() 4、querySelector() //返回指定選擇器的第一個元素 5、querySelectorAll() //返回指定選擇器 ...
# 選中Element的方式 1、getElementById() 2、getElementsByClassName() 3、getElementsByTagName() 4、querySelector() //返回指定選擇器的第一個元素 5、querySelectorAll() //返回指定選擇器的所有元素 # 元素屬性值 1、獲取元素屬性值 element.屬性 element.getAttribute() 2、設置元素屬性值 element.屬性=‘值’ element.setAttribute('屬性'，'值') 3、移除元素屬性值 element.removeAttribute('屬性') # 自定義屬性值 element.setAttribute('data-index'，'值') element.getAttribute('data-index'，'值') # 節點操作 1、父節點 node.parentNode 2、子節點 node.childNodes //所有的子節點，包括元素節點、文本節點等 parentNode.children //獲取子元素常用 node.firstElementChild node.lastElementChild 3、兄弟節點 node.nextSibling node.previousSibling node.nextElementSibling node.previousElementSibling # 創建、添加、刪除、克隆節點 document.createElement('tagName') node.appendChild(child) //添加到父元素子節點列表末尾，相當於after偽類 node.insertBefore(child,指定元素) //添加到父元素子節點列表前面，相當於before偽類 node.removeChild(child) node.cloneNode() # 註冊、刪除事件 1、傳統註冊方式(有'on') element.onclick=function(){} 2、方法監聽註冊方式（推薦） eventTarget.addEventListener('click',function(){}); 3、傳統刪除方式(有'on') eventTarget.onclick=null; 4、方法監聽刪除方式（推薦） eventTarget.removeEventListener('click',function(){}); # 事件流 1、捕獲階段：doc->html->body->father->son（從上到下） 冒泡階段：son->father->body->html->doc（從下往上） 2、e.target和this e.target返回的是**觸發**事件的對象 this返回的是**綁定**事件的對象 3、阻止預設行為 //讓鏈接不跳轉 var a=document.querySelector('a'); a.addEventListener('click',function(e){ e.preventDefalut(); }) 4、阻止事件冒泡 e.stopPropagation(); 5、事件委托 原理：把事件監聽器設置再其父節點上，然後利用冒泡原理影響設置每個子節點。 var ul=document.querySelector('ul'); ul.addEventListener('click',function(e){ e.target.style.background='red'; }) 6、禁止選中文字和禁止右鍵菜單 document.addEventListener('selectstart',function(e){ e.preventDefalut(); }) document.addEventListener('contextmenu',function(e){ e.preventDefalut(); })
