原生jsDOM節(jié)點(diǎn)操作集合_第1頁
原生jsDOM節(jié)點(diǎn)操作集合_第2頁
原生jsDOM節(jié)點(diǎn)操作集合_第3頁
原生jsDOM節(jié)點(diǎn)操作集合_第4頁
原生jsDOM節(jié)點(diǎn)操作集合_第5頁
已閱讀5頁，還剩1頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、原生js的DOM操作節(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)所在的頂層文檔對象，即documentNode.nextSibling /返回緊跟在當(dāng)前節(jié)點(diǎn)后面的第一個兄弟節(jié)點(diǎn)Node.previousSibling /返回當(dāng)前節(jié)點(diǎn)前面的、距離最近的一個兄弟節(jié)點(diǎn)Nod

2、e.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)的第一個子節(jié)點(diǎn)Node.lastChild /返回當(dāng)前節(jié)點(diǎn)的最后一個子節(jié)點(diǎn)/parentNode接口Node.children /返回指定節(jié)點(diǎn)的所有Element子節(jié)點(diǎn)Node.firstElementChild /返回當(dāng)前節(jié)點(diǎn)的第一個Element子節(jié)點(diǎn)Node.lastElementChild /返回當(dāng)前節(jié)點(diǎn)的最后一個Element子節(jié)點(diǎn)Node.childEleme

3、ntCount /返回當(dāng)前節(jié)點(diǎn)所有Element子節(jié)點(diǎn)的數(shù)目。操作Node.appendChild(node) /向節(jié)點(diǎn)添加最后一個子節(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é)點(diǎn)的父節(jié)點(diǎn)上操作Node.replaceChild(newChild,oldChild) /

4、替換節(jié)點(diǎn)Node.contains(node) /返回一個布爾值，表示參數(shù)節(jié)點(diǎn)是否為當(dāng)前節(jié)點(diǎn)的后代節(jié)點(diǎn)。NpareDocumentPosition(node) /返回一個7個比特位的二進(jìn)制值，表示參數(shù)節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)的關(guān)系Node.isEqualNode(noe) /返回布爾值，用于檢查兩個節(jié)點(diǎn)是否相等。所謂相等的節(jié)點(diǎn)，指的是兩個節(jié)點(diǎn)的類型相同、屬性相同、子節(jié)點(diǎn)相同。Node.normalize() /用于清理當(dāng)前節(jié)點(diǎn)內(nèi)部的所有Text節(jié)點(diǎn)。它會去除空的文本節(jié)點(diǎn)，并且將毗鄰的文本節(jié)點(diǎn)合并成一個。/ChildNode接口Node.remove() /用于刪除當(dāng)前節(jié)點(diǎn)Node.before() /N

5、ode.after()Node.replaceWith()Document節(jié)點(diǎn)Document節(jié)點(diǎn)的屬性document.doctype /document.documentElement /返回當(dāng)前文檔的根節(jié)點(diǎn)document.defaultView /返回document對象所在的window對象document.body /返回當(dāng)前文檔的<body>節(jié)點(diǎn)document.head /返回當(dāng)前文檔的<head>節(jié)點(diǎn)document.activeElement /返回當(dāng)前文檔中獲得焦點(diǎn)的那個元素。/節(jié)點(diǎn)集合屬性document.links /返回當(dāng)前文檔的所有a元素d

6、ocument.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)前文檔最后修改的時間戳document.location /返回location對象

7、，提供當(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)前文檔是否可編輯，可讀寫patMode /返回瀏覽器處理文檔的模式document.cookie /用來操作CookieDocument節(jié)點(diǎn)的方法讀寫方法document.open() /用于新建并打開一個文檔document.close() /

8、不安比open方法所新建的文檔document.write() /用于向當(dāng)前文檔寫入內(nèi)容document.writeIn() /用于向當(dāng)前文檔寫入內(nèi)容，尾部添加換行符。查找節(jié)點(diǎn)document.querySelector(selectors) /接受一個CSS選擇器作為參數(shù)，返回第一個匹配該選擇器的元素節(jié)點(diǎn)。document.querySelectorAll(selectors) /接受一個CSS選擇器作為參數(shù)，返回所有匹配該選擇器的元素節(jié)點(diǎn)。document.getElementsByTagName(tagName) /返回所有指定HTML標(biāo)簽的元素document.getElementsB

9、yClassName(className) /返回包括了所有class名字符合指定條件的元素document.getElementsByName(name) /用于選擇擁有name屬性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）document.getElementById(id) /返回匹配指定id屬性的元素節(jié)點(diǎn)。document.elementFromPoint(x,y) /返回位于頁面指定位置最上層的Element子節(jié)點(diǎn)。生成節(jié)點(diǎn)document.

10、createElement(tagName) /用來生成HTML元素節(jié)點(diǎn)。document.createTextNode(text) /用來生成文本節(jié)點(diǎn)document.createAttribute(name) /生成一個新的屬性對象節(jié)點(diǎn)，并返回它。document.createDocumentFragment() /生成一個DocumentFragment對象（4）事件方法document.createEvent(type) /生成一個事件對象，該對象能被element.dispatchEvent()方法使用document.addEventListener(type,listener,c

11、apture) /注冊事件document.removeEventListener(type,listener,capture) /注銷事件document.dispatchEvent(event) /觸發(fā)事件其他document.hasFocus() /返回一個布爾值，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點(diǎn)。document.adoptNode(externalNode) /將某個節(jié)點(diǎn)，從其原來所在的文檔移除，插入當(dāng)前文檔，并返回插入后的新節(jié)點(diǎn)。document.importNode(externalNode, deep) /從外部文檔拷貝指定節(jié)點(diǎn)，插入當(dāng)前文檔。Element節(jié)點(diǎn)Ele

12、ment節(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)中所有的da

13、ta-*屬性。尺寸屬性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)的水平滾動條向右滾動的像素數(shù)值,通過設(shè)置這個屬性可以改變元素的滾動位置Element.scrollTop /返回元素節(jié)點(diǎn)的垂直滾動向下

14、滾動的像素數(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)屬性位置方法getBoundingClientRect() / getBoundingClientRect返回一個對象，包含top,left,right,botto

15、m,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 +

16、 document.body.scrollTop, left: rect.left + document.body.scrollLeft 屬性方法Element.getAttribute()：讀取指定屬性 Element.setAttribute()：設(shè)置指定屬性 Element.hasAttribute()：返回一個布爾值，表示當(dāng)前元素節(jié)點(diǎn)是否有指定的屬性 Element.removeAttribute()：移除指定屬性查找方法Element.querySelector() Element.querySelectorAll() Element.getElementsByTagName() E

17、lement.getElementsByClassName()事件方法Element.addEventListener()：添加事件的回調(diào)函數(shù) Element.removeEventListener()：移除事件監(jiān)聽函數(shù) Element.dispatchEvent()：觸發(fā)事件/ie8Element.attachEvent(oneventName,listener)Element.detachEvent(oneventName,listener)/ event對象 var event = window.event|event; / 事件的目標(biāo)節(jié)點(diǎn) var target = event.targ

18、et | event.srcElement;/ 事件代理 ul.addEventListener('click', function(event) if (event.target.tagName.toLowerCase() = 'li') console.log(event.target.innerHTML) );其他Element.scrollIntoView() /滾動當(dāng)前元素，進(jìn)入瀏覽器的可見區(qū)域/解析HTML字符串，然后將生成的節(jié)點(diǎn)插入DOM樹的指定位置。Element.insertAdjacentHTML(where, htmlString); Element.insertAdjacentHTML('beforeBegin', htmlString); / 在該元素前插入 Element.

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論