選取文檔元素的方法總結_ZenDei技術網路在線

選取文檔元素的方法總結

-Advertisement-

在講解如何選取文檔元素之前，先普及一下什麼是文檔節點： HTML文檔的每個節點都表示一個Node對象，節點樹形結構的根部是Document節點，代表整個文檔，代表HTML元素的節點是Element節點，代表文本的節點是Text節點；Document、Element、Text類都是Node類的子類；（ ...

在講解如何選取文檔元素之前，先普及一下什麼是文檔節點： HTML文檔的每個節點都表示一個Node對象，節點樹形結構的根部是Document節點，代表整個文檔，代表HTML元素的節點是Element節點，代表文本的節點是Text節點；Document、Element、Text類都是Node類的子類；（Comment節點類型代表註釋節點，Attr節點類型代表屬性）

查詢一個或多個文檔元素的方法: （文檔Document對象和元素Element對象均定義了以下方法，即也可以在一個元素Element上選擇它的子元素）一、用指定的id屬性：document.getElementById('idName');方法返回實時的匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。自定義一個工具函數同時選取多個元素： function getElements('id1','id2','id3',......){ var elements = {}; for(var i = 0,len = arguments.length;i<len;i++){ var id = arguments[i]; var elt = document.getElementById(id); if(elt == null){throw new Error('No element with id: '+id);} elements[id] = elt; } return elements; } 二、用指定的name屬性：getElementsByName('name');返回一個非實時的包含若幹Element對象的只讀類數組對象NodeList對象，它同時也匹配具有和name同名的id屬性的元素，所以不要將同一個字元串同時用於id屬性和name屬性；雖然在用一個字元串給一個元素的id屬性或name屬性賦值時，這個字元串會自動的成為當前視窗對象的一個全局屬性，即可以直接通過該屬性名調用對應的元素，但最好顯示的調用getElementsByName()來選取他們，因為該變數在日後可能會失效(當給視窗對象定義同名屬性時) 三、用指定的標簽名：getElementsByTagName('tagname');同樣返回一個實時的NodeList對象，該類數組對象中的元素是按所有該標簽在文檔中出現的順序排序的，可通過索引來選取指定元素；該方法不區分標簽的大小寫；可使用'*'通配符來選取文檔的所有元素；可在指定Element對象上調用該方法，來選取它的子元素； HTMLDocument類還指定了一些快捷屬性，如：images、forms、links、anchors、embeds、plugins、scripts等，他們都指定HTMLCollection對象，它也是一個類數組對象，可以這樣來選取他們的集合中的某一個元素document.forms['idname'];或document.images[0]; HTMLDocument類還指定body、head屬性，特指<body>和<head>元素，還有documentElement屬性指文檔的根元素<html> NodeList和HTMLCollection對象通常是實時的，即當文檔變化時它們所包含的元素列表能隨之改變；最好使用for迴圈來遍歷一個NodeList或HTMLCollection對象，而for..in迴圈會遍歷到他們的length屬性；四、用指定的class屬性：getElementsByClassName();基於其class屬性值中的標識符來選取成組的文檔元素，他也返回一個實時的NodeList對象五、用指定的CSS選擇器來匹配：(返回的是非實時的NodeList對象，相對其他方法較低效) querySelectorAll()根據一個包含CSS選擇器的字元串，返回一個表示當前文檔中匹配選擇器的所有元素的NodeList對象，但該NodeList對象不是實時的，它只包含調用時刻所匹配到的元素，並不更新後續文檔的變化，若找不到匹配則返回空的NodeList對象；可使用'*'通配符來選取文檔的所有元素 querySelector()只返回第一個匹配的元素對象(以文檔順序)，若匹配不到則返回null querySelector()、querySelectorAll()在元素Element對象上也有定義，在元素上調用它們時，先仍然在整個文檔中匹配，然後再過濾出結果集以便它只包含該元素的後代元素； querySelector()、querySelectorAll()在大多情況下不匹配偽元素，如:first-line :first-letter :link :visited 六、elementFromPoint()：方法返回位於頁面指定位置的元素。 var element = document.elementFromPoint(x, y); 上面代碼中，elementFromPoint方法的參數x和y，分別是相對於當前視窗左上角的橫坐標和縱坐標，單位是CSS像素。elementFromPoint方法返回位於這個位置的DOM元素，如果該元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）。如果坐標值無意義（比如負值），則返回null。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

JavaScript 基礎第六天

一、引言前面我們介紹了有關於內置對象的很多很多的API，講道理得話如果想徹底的掌握那一定要經過一定的代碼段沉澱下。大家可以想象一下，既然在程式中有很多的內置對象供我們使用，那我們是不是也可以定義一些對象作為我們自己的特用對象呢？答案肯定是可以的。二、導入在工作中根據內容需求不同我們可以定義不同 ...
JavaScript中的this引用

在JavaScript的學習當中，this關鍵字的出現頻率可不低，所以想想有必要對this關鍵字做一個總結。在總結過程中，參考的資料來源於書本及網上。一、定義 1、this是函數內部的一個特殊對象（或this引用）--它引用的是函數據以執行的環境對象。（來源於JavaScript高級程式設計） 2 ...
JS正則表達式總結

正則需要傳參時,必須使用new RegExp(); var re = new RegExp('\\b'+sClass+'\\b'); 量詞,轉義字元: \s : 空格\S : 非空格 \d : 數字\D : 非數字 \w : 字元(字母,數字,下劃線)\W : 非字元 \. :真正的點 \b:獨立的 ...
select元素中設置padding效果

給select元素增加：padding-left：20px;但是未生效，如下圖所示：在select上如何使設置padding生效？方法一：設置屬性appearance：給select增加屬性： appearance: none; -webkit-appearance: none; 效果如下： ...
CSS樣式權值

內聯樣式表(InLine style)>內部樣式表(Internal style sheet)>外部樣式表(External style sheet) 例外:但如果外部樣式表放在內部樣式表下邊引用,則外部樣式表>內部樣式表; 1,內聯樣式表權值為1000; 2,ID選擇器的權值為100; 3,Cla ...
隨堂筆記之正則與HTML5新元素

在進入主題前，先插個網站https://www.processon.com/ ProcessOn是一個線上協作繪圖平臺,為用戶提供最強大、易用的作圖工具! 它可以很方便的線上簡單繪製一些東西，讓自己去具體理解。正則表達式今日的正則只是學習正則的簡單使用。在HTML5的標簽屬性的強大面前，我們已 ...
JavaScript 基礎第五天

一、引言前面我們討論了函數的一些基本概念，因為函數在任何一門語言之中都是很重要所以還是要好好學。昨天打開博客的時候看到有人私信我的JavaScript寫錯了，我定睛一看果然寫錯了。對此我表示很抱歉，希望大家能夠看得時候多噴我兩句就忘了這件事吧。二、導入今天我們要討論一下有關於對象的內容，我們首 ...
html 基礎(3)

w3school：http://www.w3school.com.cn/ runoob：http://www.runoob.com/ html標簽參考手冊：http://www.runoob.com/tags/html-reference.html html顏色名：http://www.runoob ...