選中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(); ? })
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145761.html
標籤：JavaScript
上一篇：element-ui純前端分頁