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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、原生js的DOM操作節(jié)點屬性Node.nodeName /返回節(jié)點名稱，只讀Node.nodeType /返回節(jié)點類型的常數(shù)值，只讀Node.nodeValue /返回Text或Comment節(jié)點的文本值，只讀Node.textContent /返回當前節(jié)點和它的所有后代節(jié)點的文本內容，可讀寫Node.baseURI /返回當前網頁的絕對路徑Node.ownerDocument /返回當前節(jié)點所在的頂層文檔對象，即documentNode.nextSibling /返回緊跟在當前節(jié)點后面的第一個兄弟節(jié)點Node.previousSibling /返回當前節(jié)點前面的、距離最近的一個兄弟節(jié)點Nod

2、e.parentNode /返回當前節(jié)點的父節(jié)點Node.parentElement /返回當前節(jié)點的父Element節(jié)點Node.childNodes /返回當前節(jié)點的所有子節(jié)點Node.firstChild /返回當前節(jié)點的第一個子節(jié)點Node.lastChild /返回當前節(jié)點的最后一個子節(jié)點/parentNode接口Node.children /返回指定節(jié)點的所有Element子節(jié)點Node.firstElementChild /返回當前節(jié)點的第一個Element子節(jié)點Node.lastElementChild /返回當前節(jié)點的最后一個Element子節(jié)點Node.childEleme

3、ntCount /返回當前節(jié)點所有Element子節(jié)點的數(shù)目。操作Node.appendChild(node) /向節(jié)點添加最后一個子節(jié)點Node.hasChildNodes() /返回布爾值，表示當前節(jié)點是否有子節(jié)點Node.cloneNode(true); / 默認為false(克隆節(jié)點), true(克隆節(jié)點及其屬性，以及后代)Node.insertBefore(newNode,oldNode) / 在指定子節(jié)點之前插入新的子節(jié)點Node.removeChild(node) /刪除節(jié)點，在要刪除節(jié)點的父節(jié)點上操作Node.replaceChild(newChild,oldChild) /

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

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

6、ocument.forms /返回頁面中所有表單元素document.images /返回頁面中所有圖片元素document.embeds /返回網頁中所有嵌入對象document.scripts /返回當前文檔的所有腳本document.styleSheets /返回當前網頁的所有樣式表/文檔信息屬性document.documentURI /表示當前文檔的網址document.URL /返回當前文檔的網址document.domain /返回當前文檔的域名document.lastModified /返回當前文檔最后修改的時間戳document.location /返回location對象

7、，提供當前文檔的URL信息document.referrer /返回當前文檔的訪問來源document.title /返回當前文檔的標題document.characterSet屬性返回渲染當前文檔的字符集，比如UTF-8、ISO-8859-1。document.readyState /返回當前文檔的狀態(tài)document.designMode /控制當前文檔是否可編輯，可讀寫patMode /返回瀏覽器處理文檔的模式document.cookie /用來操作CookieDocument節(jié)點的方法讀寫方法document.open() /用于新建并打開一個文檔document.close() /

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

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

10、createElement(tagName) /用來生成HTML元素節(jié)點。document.createTextNode(text) /用來生成文本節(jié)點document.createAttribute(name) /生成一個新的屬性對象節(jié)點，并返回它。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() /返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。document.adoptNode(externalNode) /將某個節(jié)點，從其原來所在的文檔移除，插入當前文檔，并返回插入后的新節(jié)點。document.importNode(externalNode, deep) /從外部文檔拷貝指定節(jié)點，插入當前文檔。Element節(jié)點Ele

12、ment節(jié)點的屬性特性屬性Element.attributes /返回當前元素節(jié)點的所有屬性節(jié)點Element.id /返回指定元素的id屬性，可讀寫Element.tagName /返回指定元素的大寫標簽名Element.innerHTML /返回該元素包含的HTML代碼，可讀寫Element.outerHTML /返回指定元素節(jié)點的所有HTML代碼，包括它自身和包含的的所有子元素，可讀寫Element.className /返回當前元素的class屬性，可讀寫Element.classList /返回當前元素節(jié)點的所有class集合Element.dataset /返回元素節(jié)點中所有的da

13、ta-*屬性。尺寸屬性Element.clientHeight /返回元素節(jié)點可見部分的高度Element.clientWidth /返回元素節(jié)點可見部分的寬度Element.clientLeft /返回元素節(jié)點左邊框的寬度Element.clientTop /返回元素節(jié)點頂部邊框的寬度Element.scrollHeight /返回元素節(jié)點的總高度Element.scrollWidth /返回元素節(jié)點的總寬度Element.scrollLeft /返回元素節(jié)點的水平滾動條向右滾動的像素數(shù)值,通過設置這個屬性可以改變元素的滾動位置Element.scrollTop /返回元素節(jié)點的垂直滾動向下

14、滾動的像素數(shù)值Element.offsetHeight /返回元素的垂直高度(包含border,padding)Element.offsetWidth /返回元素的水平寬度(包含border,padding)Element.offsetLeft /返回當前元素左上角相對于Element.offsetParent節(jié)點的垂直偏移Element.offsetTop /返回水平位移Element.style /返回元素節(jié)點的行內樣式節(jié)點相關屬性位置方法getBoundingClientRect() / getBoundingClientRect返回一個對象，包含top,left,right,botto

15、m,width,height / width、height 元素自身寬高/ top 元素上外邊界距窗口最上面的距離/ right 元素右外邊界距窗口最上面的距離/ bottom 元素下外邊界距窗口最上面的距離/ left 元素左外邊界距窗口最上面的距離/ width 元素自身寬(包含border,padding) / height 元素自身高(包含border,padding) getClientRects() /返回當前元素在頁面上形參的所有矩形。/ 元素在頁面上的偏移量 var rect = el.getBoundingClientRect() return top: rect.top +

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

17、lement.getElementsByClassName()事件方法Element.addEventListener()：添加事件的回調函數(shù) Element.removeEventListener()：移除事件監(jiān)聽函數(shù) Element.dispatchEvent()：觸發(fā)事件/ie8Element.attachEvent(oneventName,listener)Element.detachEvent(oneventName,listener)/ event對象 var event = window.event|event; / 事件的目標節(jié)點 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() /滾動當前元素，進入瀏覽器的可見區(qū)域/解析HTML字符串，然后將生成的節(jié)點插入DOM樹的指定位置。Element.insertAdjacentHTML(where, htmlString); Element.insertAdjacentHTML('beforeBegin', htmlString); / 在該元素前插入 Element.

溫馨提示

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

評論

0/150

提交評論