節(jié)點(diǎn)屬性

• Node.nodeName //返回節(jié)點(diǎn)名稱，只讀
• Node.nodeType //返回節(jié)點(diǎn)類型的常數(shù)值，只讀
• Node.nodeValue //返回Text或Comment節(jié)點(diǎn)的文本值，只讀
• Node.textContent //返回當(dāng)前節(jié)點(diǎn)和它的所有后代節(jié)點(diǎn)的文本內(nèi)容，可讀寫
• Node.baseURI //返回當(dāng)前網(wǎng)頁的絕對路徑
• Node.ownerDocument //返回當(dāng)前節(jié)點(diǎn)所在的頂層文檔對象，即document
• Node.nextSibling //返回緊跟在當(dāng)前節(jié)點(diǎn)后面的第一個(gè)兄弟節(jié)點(diǎn)
• Node.previousSibling //返回當(dāng)前節(jié)點(diǎn)前面的、距離最近的一個(gè)兄弟節(jié)點(diǎn)
• Node.parentNode //返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
• Node.parentElement //返回當(dāng)前節(jié)點(diǎn)的父Element節(jié)點(diǎn)
• Node.childNodes //返回當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)
• Node.firstChild //返回當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
• Node.lastChild //返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
• Node.children //返回指定節(jié)點(diǎn)的所有Element子節(jié)點(diǎn)
• Node.firstElementChild //返回當(dāng)前節(jié)點(diǎn)的第一個(gè)Element子節(jié)點(diǎn)
• Node.lastElementChild //返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)Element子節(jié)點(diǎn)
• Node.childElementCount //返回當(dāng)前節(jié)點(diǎn)所有Element子節(jié)點(diǎn)的數(shù)目。

節(jié)點(diǎn)操作

• Node.appendChild(node) //向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)
• Node.hasChildNodes() //返回布爾值，表示當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)
• Node.cloneNode(true); // 默認(rèn)為false(克隆節(jié)點(diǎn)), true(克隆節(jié)點(diǎn)及其屬性，以及后代)
• Node.insertBefore(newNode,oldNode) // 在指定子節(jié)點(diǎn)之前插入新的子節(jié)點(diǎn)
• Node.removeChild(node) //刪除節(jié)點(diǎn)，在要?jiǎng)h除節(jié)點(diǎn)的父節(jié)點(diǎn)上操作
• Node.replaceChild(newChild,oldChild) //替換節(jié)點(diǎn)
• Node.contains(node) //返回一個(gè)布爾值，表示參數(shù)節(jié)點(diǎn)是否為當(dāng)前節(jié)點(diǎn)的后代節(jié)點(diǎn)。
• Node.compareDocumentPosition(node) //返回一個(gè)7個(gè)比特位的二進(jìn)制值，表示參數(shù)節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)的關(guān)系
• Node.isEqualNode(noe) //返回布爾值，用于檢查兩個(gè)節(jié)點(diǎn)是否相等。所謂相等的節(jié)點(diǎn)，指的是兩個(gè)節(jié)點(diǎn)的類型相同、屬性相同、子節(jié)點(diǎn)相同。
• Node.normalize() //用于清理當(dāng)前節(jié)點(diǎn)內(nèi)部的所有Text節(jié)點(diǎn)。它會(huì)去除空的文本節(jié)點(diǎn)，并且將毗鄰的文本節(jié)點(diǎn)合并成一個(gè)。
• Node.remove() //用于刪除當(dāng)前節(jié)點(diǎn)
• Node.before() //
• Node.after()
• Node.replaceWith()

Document節(jié)點(diǎn)

• document.doctype //
• document.documentElement //返回當(dāng)前文檔的根節(jié)點(diǎn)
• document.defaultView //返回document對象所在的window對象
• document.body //返回當(dāng)前文檔的節(jié)點(diǎn)
• document.head //返回當(dāng)前文檔的節(jié)點(diǎn)
• document.activeElement //返回當(dāng)前文檔中獲得焦點(diǎn)的那個(gè)元素。
• document.links //返回當(dāng)前文檔的所有a元素
• document.forms //返回頁面中所有表單元素
• document.images //返回頁面中所有圖片元素
• document.embeds //返回網(wǎng)頁中所有嵌入對象
• document.scripts //返回當(dāng)前文檔的所有腳本
• document.styleSheets //返回當(dāng)前網(wǎng)頁的所有樣式表
• document.documentURI //表示當(dāng)前文檔的網(wǎng)址
• document.URL //返回當(dāng)前文檔的網(wǎng)址
• document.domain //返回當(dāng)前文檔的域名
• document.lastModified //返回當(dāng)前文檔最后修改的時(shí)間戳
• document.location //返回location對象，提供當(dāng)前文檔的URL信息
• document.referrer //返回當(dāng)前文檔的訪問來源
• document.title //返回當(dāng)前文檔的標(biāo)題
• document.characterSet屬性返回渲染當(dāng)前文檔的字符集，比如UTF-8、ISO-8859-1。
• document.readyState //返回當(dāng)前文檔的狀態(tài)
• document.designMode //控制當(dāng)前文檔是否可編輯，可讀寫
• document.compatMode //返回瀏覽器處理文檔的模式
• document.cookie //用來操作Cookie

Document節(jié)點(diǎn)的方法

讀寫方法

• document.open() //用于新建并打開一個(gè)文檔
• document.close() //不安比open方法所新建的文檔
• document.write() //用于向當(dāng)前文檔寫入內(nèi)容
• document.writeIn() //用于向當(dāng)前文檔寫入內(nèi)容，尾部添加換行符。

查找節(jié)點(diǎn)

• document.querySelector(selectors) //接受一個(gè)CSS選擇器作為參數(shù)，返回第一個(gè)匹配該選擇器的元素節(jié)點(diǎn)。
• document.querySelectorAll(selectors) //接受一個(gè)CSS選擇器作為參數(shù)，返回所有匹配該選擇器的元素節(jié)點(diǎn)。
• document.getElementsByTagName(tagName) //返回所有指定HTML標(biāo)簽的元素
• document.getElementsByClassName(className) //返回包括了所有class名字符合指定條件的元素
• document.getElementsByName(name) //用于選擇擁有name屬性的HTML元素（比如、、、、和等）
• document.getElementById(id) //返回匹配指定id屬性的元素節(jié)點(diǎn)。
• document.elementFromPoint(x,y) //返回位于頁面指定位置最上層的Element子節(jié)點(diǎn)。

生成節(jié)點(diǎn)

• document.createElement(tagName) //用來生成HTML元素節(jié)點(diǎn)。
• document.createTextNode(text) //用來生成文本節(jié)點(diǎn)
• document.createAttribute(name) //生成一個(gè)新的屬性對象節(jié)點(diǎn)，并返回它。
• document.createDocumentFragment() //生成一個(gè)DocumentFragment對象
• document.createEvent(type) //生成一個(gè)事件對象，該對象能被-
• element.dispatchEvent()方法使用
• document.addEventListener(type,listener,capture) //注冊事件
• document.removeEventListener(type,listener,capture) //注銷事件
• document.dispatchEvent(event) //觸發(fā)事件

其他

• document.hasFocus() //返回一個(gè)布爾值，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點(diǎn)。
• document.adoptNode(externalNode) //將某個(gè)節(jié)點(diǎn)，從其原來所在的文檔移除，插入當(dāng)前文檔，并返回插入后的新節(jié)點(diǎn)。
• document.importNode(externalNode, deep) //從外部文檔拷貝指定節(jié)點(diǎn)，插入當(dāng)前文檔。

Element節(jié)點(diǎn)及其屬性

特性屬性

• Element.attributes //返回當(dāng)前元素節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)
• Element.id //返回指定元素的id屬性，可讀寫
• Element.tagName //返回指定元素的大寫標(biāo)簽名
• Element.innerHTML //返回該元素包含的HTML代碼，可讀寫
• Element.outerHTML //返回指定元素節(jié)點(diǎn)的所有HTML代碼，包括它自身和包含的的所有子元素，可讀寫
• Element.className //返回當(dāng)前元素的class屬性，可讀寫
• Element.classList //返回當(dāng)前元素節(jié)點(diǎn)的所有class集合
• Element.dataset //返回元素節(jié)點(diǎn)中所有的data-*屬性。
  尺寸屬性
• Element.clientHeight //返回元素節(jié)點(diǎn)可見部分的高度
• Element.clientWidth //返回元素節(jié)點(diǎn)可見部分的寬度
• Element.clientLeft //返回元素節(jié)點(diǎn)左邊框的寬度
• Element.clientTop //返回元素節(jié)點(diǎn)頂部邊框的寬度
• Element.scrollHeight //返回元素節(jié)點(diǎn)的總高度
• Element.scrollWidth //返回元素節(jié)點(diǎn)的總寬度
• Element.scrollLeft //返回元素節(jié)點(diǎn)的水平滾動(dòng)條向右滾動(dòng)的像素?cái)?shù)值,通過設(shè)置這個(gè)屬性可以改變元素的滾動(dòng)位置
• Element.scrollTop //返回元素節(jié)點(diǎn)的垂直滾動(dòng)向下滾動(dòng)的像素?cái)?shù)值
• Element.offsetHeight //返回元素的垂直高度(包含border,padding)
• Element.offsetWidth //返回元素的水平寬度(包含border,padding)
• Element.offsetLeft //返回當(dāng)前元素左上角相對于
• Element.offsetParent節(jié)點(diǎn)的垂直偏移
• Element.offsetTop //返回水平位移
• Element.style //返回元素節(jié)點(diǎn)的行內(nèi)樣式
  節(jié)點(diǎn)相關(guān)屬性
• Element.children //包括當(dāng)前元素節(jié)點(diǎn)的所有子元素
• Element.childElementCount //返回當(dāng)前元素節(jié)點(diǎn)包含的子HTML元素節(jié)點(diǎn)的個(gè)數(shù)
• Element.firstElementChild //返回當(dāng)前節(jié)點(diǎn)的第一個(gè)Element子節(jié)點(diǎn)
• Element.lastElementChild //返回當(dāng)前節(jié)點(diǎn)的最后一個(gè)Element子節(jié)點(diǎn)
• Element.nextElementSibling //返回當(dāng)前元素節(jié)點(diǎn)的下一個(gè)兄弟HTML元素節(jié)點(diǎn)
• Element.previousElementSibling //返回當(dāng)前元素節(jié)點(diǎn)的前一個(gè)兄弟HTML節(jié)點(diǎn)
• Element.offsetParent //返回當(dāng)前元素節(jié)點(diǎn)的最靠近的、并且CSS的position屬性不等于static的父元素。

Element節(jié)點(diǎn)的方法

• getBoundingClientRect ：返回一個(gè)對象，包含top,left,right,bottom,width,height // width、height 元素自身寬高
  // top 元素上外邊界距窗口最上面的距離
  // right 元素右外邊界距窗口最上面的距離
  // bottom 元素下外邊界距窗口最上面的距離
  // left 元素左外邊界距窗口最上面的距離
  // width 元素自身寬(包含border,padding)
  // height 元素自身高(包含border,padding)
• getClientRects() //返回當(dāng)前元素在頁面上形參的所有矩形。
  // 元素在頁面上的偏移量

var rect = el.getBoundingClientRect() 
  return { 
      top: rect.top + document.body.scrollTop, 
      left: rect.left + document.body.scrollLeft 
    }

屬性方法

• Element.getAttribute()：讀取指定屬性
• Element.setAttribute()：設(shè)置指定屬性
• Element.hasAttribute()：返回一個(gè)布爾值，表示當(dāng)前元素節(jié)點(diǎn)是否有指定的屬性
• Element.removeAttribute()：移除指定屬性
• Element.querySelector()
• Element.querySelectorAll()
• Element.getElementsByTagName()
• Element.getElementsByClassName()
• Element.addEventListener()：添加事件的回調(diào)函數(shù)
• Element.removeEventListener()：移除事件監(jiān)聽函數(shù)
• Element.dispatchEvent()：觸發(fā)事件
• Element.attachEvent(oneventName,listener)
• Element.detachEvent(oneventName,listener)

// event對象 
var event = window.event||event; 
// 事件的目標(biāo)節(jié)點(diǎn) 
var target = event.target || event.srcElement;
// 事件代理 
ul.addEventListener('click', function(event) { 
  if (event.target.tagName.toLowerCase() === 'li') { 
  console.log(event.target.innerHTML) 
 } 
});

• Element.scrollIntoView() //滾動(dòng)當(dāng)前元素，進(jìn)入瀏覽器的可見區(qū)域
  //解析HTML字符串，然后將生成的節(jié)點(diǎn)插入DOM樹的指定位置。
• Element.insertAdjacentHTML(where, htmlString);
• Element.insertAdjacentHTML('beforeBegin', htmlString); // 在該元素前插入
• Element.insertAdjacentHTML('afterBegin', htmlString); // 在該元素第一個(gè)子元素前插入
• Element.insertAdjacentHTML('beforeEnd', htmlString); // 在該元素最后一個(gè)子元素后面插入
• Element.insertAdjacentHTML('afterEnd', htmlString); // 在該元素后插入
• Element.remove() //用于將當(dāng)前元素節(jié)點(diǎn)從DOM中移除
• Element.focus() //用于將當(dāng)前頁面的焦點(diǎn)，轉(zhuǎn)移到指定元素上