国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生JS中DOM節點相關API合集

lemon / 2026人閱讀

摘要：返回一個個比特位的二進制值，表示參數節點和當前節點的關系返回布爾值，用于檢查兩個節點是否相等。生成一個對象事件方法生成一個事件對象，該對象能被方法使用注冊事件注銷事件觸發事件其他返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。

節點屬性

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

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

Document節點的屬性

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

讀寫方法

document.open() //用于新建并打開一個文檔
document.close() //不安比open方法所新建的文檔
document.write() //用于向當前文檔寫入內容
document.writeIn() //用于向當前文檔寫入內容，尾部添加換行符。
查找節點

document.querySelector(selectors) //接受一個CSS選擇器作為參數，返回第一個匹配該選擇器的元素節點。
document.querySelectorAll(selectors) //接受一個CSS選擇器作為參數，返回所有匹配該選擇器的元素節點。
document.getElementsByTagName(tagName) //返回所有指定HTML標簽的元素
document.getElementsByClassName(className) //返回包括了所有class名字符合指定條件的元素
document.getElementsByName(name) //用于選擇擁有name屬性的HTML元素（比如

、、、、和等）
document.getElementById(id) //返回匹配指定id屬性的元素節點。
document.elementFromPoint(x,y) //返回位于頁面指定位置最上層的Element子節點。
生成節點

document.createElement(tagName) //用來生成HTML元素節點。
document.createTextNode(text) //用來生成文本節點
document.createAttribute(name) //生成一個新的屬性對象節點，并返回它。
document.createDocumentFragment() //生成一個DocumentFragment對象
（4）事件方法
document.createEvent(type) //生成一個事件對象，該對象能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture) //注冊事件
document.removeEventListener(type,listener,capture) //注銷事件
document.dispatchEvent(event) //觸發事件
其他

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

Element節點的屬性

特性屬性

Element.attributes //返回當前元素節點的所有屬性節點
Element.id //返回指定元素的id屬性，可讀寫
Element.tagName //返回指定元素的大寫標簽名
Element.innerHTML //返回該元素包含的HTML代碼，可讀寫
Element.outerHTML //返回指定元素節點的所有HTML代碼，包括它自身和包含的的所有子元素，可讀寫
Element.className //返回當前元素的class屬性，可讀寫
Element.classList //返回當前元素節點的所有class集合
Element.dataset //返回元素節點中所有的data-*屬性。
尺寸屬性

Element.clientHeight //返回元素節點可見部分的高度
Element.clientWidth //返回元素節點可見部分的寬度
Element.clientLeft //返回元素節點左邊框的寬度
Element.clientTop //返回元素節點頂部邊框的寬度
Element.scrollHeight //返回元素節點的總高度
Element.scrollWidth //返回元素節點的總寬度
Element.scrollLeft //返回元素節點的水平滾動條向右滾動的像素數值,通過設置這個屬性可以改變元素的滾動位置
Element.scrollTop //返回元素節點的垂直滾動向下滾動的像素數值
Element.offsetHeight //返回元素的垂直高度(包含border,padding)
Element.offsetWidth //返回元素的水平寬度(包含border,padding)
Element.offsetLeft //返回當前元素左上角相對于Element.offsetParent節點的垂直偏移
Element.offsetTop //返回水平位移
Element.style //返回元素節點的行內樣式
節點相關屬性

Element.children //包括當前元素節點的所有子元素
Element.childElementCount //返回當前元素節點包含的子HTML元素節點的個數
Element.firstElementChild //返回當前節點的第一個Element子節點
Element.lastElementChild //返回當前節點的最后一個Element子節點
Element.nextElementSibling //返回當前元素節點的下一個兄弟HTML元素節點
Element.previousElementSibling //返回當前元素節點的前一個兄弟HTML節點
Element.offsetParent //返回當前元素節點的最靠近的、并且CSS的position屬性不等于static的父元素。
Element節點的方法

位置方法

getBoundingClientRect()
// getBoundingClientRect返回一個對象，包含top,left,right,bottom,width,height // width、height 元素自身寬高
// top 元素上外邊界距窗口最上面的距離
// right 元素右外邊界距窗口最上面的距離
// bottom 元素下外邊界距窗口最上面的距離
// left 元素左外邊界距窗口最上面的距離
// width 元素自身寬(包含border,padding)
// height 元素自身高(包含border,padding)
getClientRects() //返回當前元素在頁面上形參的所有矩形。
// 元素在頁面上的偏移量
var rect = el.getBoundingClientRect()
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
屬性方法

Element.getAttribute()：讀取指定屬性
Element.setAttribute()：設置指定屬性
Element.hasAttribute()：返回一個布爾值，表示當前元素節點是否有指定的屬性
Element.removeAttribute()：移除指定屬性
查找方法

Element.querySelector()
Element.querySelectorAll()
Element.getElementsByTagName()
Element.getElementsByClassName()
事件方法

Element.addEventListener()：添加事件的回調函數
Element.removeEventListener()：移除事件監聽函數
Element.dispatchEvent()：觸發事件
//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)
// event對象
var event = window.event||event;
// 事件的目標節點
var target = event.target || event.srcElement;
// 事件代理
ul.addEventListener("click", function(event) {
if (event.target.tagName.toLowerCase() === "li") {

console.log(event.target.innerHTML)

}
});
其他

Element.scrollIntoView() //滾動當前元素，進入瀏覽器的可見區域
//解析HTML字符串，然后將生成的節點插入DOM樹的指定位置。
Element.insertAdjacentHTML(where, htmlString);
Element.insertAdjacentHTML("beforeBegin", htmlString); // 在該元素前插入
Element.insertAdjacentHTML("afterBegin", htmlString); // 在該元素第一個子元素前插入
Element.insertAdjacentHTML("beforeEnd", htmlString); // 在該元素最后一個子元素后面插入
Element.insertAdjacentHTML("afterEnd", htmlString); // 在該元素后插入
Element.remove() //用于將當前元素節點從DOM中移除
Element.focus() //用于將當前頁面的焦點，轉移

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82375.html

相關文章

  • 原生JS中DOM節點相關API合集

    摘要：返回一個個比特位的二進制值，表示參數節點和當前節點的關系返回布爾值，用于檢查兩個節點是否相等。生成一個對象事件方法生成一個事件對象，該對象能被方法使用注冊事件注銷事件觸發事件其他返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。 原生JS中DOM節點相關API合集 節點屬性 Node.nodeName //返回節點名稱，只讀 Node.nodeType //返回節點類...

    junfeng777 評論0 收藏0

  • 原生JS中DOM節點相關API合集

    摘要：返回一個個比特位的二進制值，表示參數節點和當前節點的關系返回布爾值，用于檢查兩個節點是否相等。生成一個對象事件方法生成一個事件對象，該對象能被方法使用注冊事件注銷事件觸發事件其他返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。 原生JS中DOM節點相關API合集 節點屬性 Node.nodeName //返回節點名稱，只讀 Node.nodeType //返回節點類...

    BaronZhang 評論0 收藏0

  • 精彩文章賞析 - 收藏集 - 掘金

    摘要：掘金原文地址譯文出自掘金翻譯計劃譯者請持續關注中文維護鏈接獲取最新內容。由于以下的瀏覽器市場份額已逐年下降，所以對于瀏覽器技巧三視覺效果前端掘金揭秘學習筆記系列，記錄和分享各種實用技巧，共同進步。 沉浸式學 Git - 前端 - 掘金目錄 設置 再談設置 創建項目 檢查狀態 做更改 暫存更改 暫存與提交 提交更改 更改而非文件 歷史 別名 獲得舊版本 給版本打標簽 撤銷本地更改... ...

    godiscoder 評論0 收藏0

  • JavaScript - 收藏集 - 掘金

    摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

    izhuhaodev 評論0 收藏0

  • 前端培訓-中級階段（6）- jQuery元素節點操作（2019-07-18期）

    摘要：已存在節點是移動，新節點是新增。鏈式操作對象為。將他們的父節點移除。從中刪除所有匹配的元素。一個布爾值或者指示事件處理函數是否會被復制。以上版本默認值是一個布爾值，指示是否對事件處理程序和克隆的元素的所有子元素的數據應該被復制。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/...

    taoszu 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<