一判没、節(jié)點(diǎn)
1.1 節(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)頁的絕對(duì)路徑
Node.ownerDocument //返回當(dāng)前節(jié)點(diǎn)所在的頂層文檔對(duì)象刊头,即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)
parentNode接口
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ù)目。
1.2 操作
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è)顶吮。
//ChildNode接口
Node.remove() //用于刪除當(dāng)前節(jié)點(diǎn)
Node.before() //
Node.after()
Node.replaceWith()
1.3 Document節(jié)點(diǎn)
1.3.1 Document節(jié)點(diǎn)的屬性
document.doctype //
document.documentElement //返回當(dāng)前文檔的根節(jié)點(diǎn)
document.defaultView //返回document對(duì)象所在的window對(duì)象
document.body //返回當(dāng)前文檔的<body>節(jié)點(diǎn)
document.head //返回當(dāng)前文檔的<head>節(jié)點(diǎn)
document.activeElement //返回當(dāng)前文檔中獲得焦點(diǎn)的那個(gè)元素。
//節(jié)點(diǎn)集合屬性
document.links //返回當(dāng)前文檔的所有a元素
document.forms //返回頁面中所有表單元素
document.images //返回頁面中所有圖片元素
document.embeds //返回網(wǎng)頁中所有嵌入對(duì)象
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對(duì)象粪薛,提供當(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
1.3.2 Document節(jié)點(diǎn)的方法
(1)讀寫方法
document.open() //用于新建并打開一個(gè)文檔
document.close() //不安比open方法所新建的文檔
document.write() //用于向當(dāng)前文檔寫入內(nèi)容
document.writeIn() //用于向當(dāng)前文檔寫入內(nèi)容,尾部添加換行符陨界。
(2)查找節(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元素(比如<form>、<radio>俏扩、<img>糜工、<frame>、<embed>和<object>等)
document.getElementById(id) //返回匹配指定id屬性的元素節(jié)點(diǎn)录淡。
document.elementFromPoint(x,y) //返回位于頁面指定位置最上層的Element子節(jié)點(diǎn)捌木。
(3)生成節(jié)點(diǎn)
document.createElement(tagName) //用來生成HTML元素節(jié)點(diǎn)。
document.createTextNode(text) //用來生成文本節(jié)點(diǎn)
document.createAttribute(name) //生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)嫉戚,并返回它刨裆。
document.createDocumentFragment() //生成一個(gè)DocumentFragment對(duì)象
(4)事件方法
document.createEvent(type) //生成一個(gè)事件對(duì)象,該對(duì)象能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture) //注冊(cè)事件
document.removeEventListener(type,listener,capture) //注銷事件
document.dispatchEvent(event) //觸發(fā)事件
(5)其他
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)前文檔疯坤。
1.4 Element節(jié)點(diǎn)
1.4.1 Element節(jié)點(diǎn)的屬性
(1)特性屬性
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-*屬性刑峡。
(2)尺寸屬性
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è)屬性可以改變?cè)氐臐L動(dòng)位置
Element.scrollTop //返回元素節(jié)點(diǎn)的垂直滾動(dòng)向下滾動(dòng)的像素?cái)?shù)值
Element.offsetHeight //返回元素的垂直高度
Element.offsetWidth //返回元素的水平寬度
Element.offsetLeft //返回當(dāng)前元素左上角相對(duì)于Element.offsetParent節(jié)點(diǎn)的垂直偏移