Javascript指令碼語言簡介、查詢元素節點、檢視是否存在子節點、根節點

阿新 • • 發佈：2019-01-16

1、Js中的的dom的元素節點和文字節點

DOM是Document Object Model文件物件模型的縮寫。根據W3C DOM 規範,DOM是一種與瀏覽器，平臺，語言無關的介面，使得你可以訪問頁面其他的標準組件

D：文件 – html 文件或 xml 文件

O：物件 – 把document裡的所有節點都看成物件

M：模型（用於建立從文件到物件的模型）

DOM 是針對xml(html)的基於樹的API。

DOM樹:節點（node）的層次。

DOM 把一個文件表示一個樹模型

DOM定義了Node的介面以及許多種節點型別來表示XML節點的多個方面

從結構圖可以看出，整個html稱為dom樹。而dom的引用為document，也稱為一個節點

每一個HTML標籤都為一個元素節點

標籤中的文字則是文字節點

標籤中的屬性則是屬性節點

dom中元素、文字、屬性都是節點

dom樹是由節點構成的

每個節點都代表一個物件

建立從HTML程式碼到DOM文件的對應關係

方法	返回型別	說明
nodeName	String	節點的名字
nodeValue	String	節點的值
nodeType	Number	節點的型別常量值
firstChild	Node	指向在childNodes列表中的第一個節點
lastChild	Node	指向在childNodes列表中的最後一個節點
childNodes	NodeList	所有子節點的列表
previousSibling	Node	指向前一個兄弟節點；如果這個節點就是第一個兄弟節點，那麼該值為null
nextSibling	Node	指向後一個兄弟節點；如果這個節點就是最後一個兄弟節點，那麼該值為null
hasChildNodes()	Boolean	當childNodes包含一個或多個節點時，返回真
attributes	NamedNodeMap	包含了代表一個元素的特性的Attr物件；僅用於Element 節點
appendChild(node)	Node	將node新增到childNodes的末尾
removeChild(node)	Node	從childNodes中刪除node
replaceChild(newnode,oldnode)	Node	將childNodes中的oldnode替換成newnode

查詢並訪問節點

你可通過若干種方法來查詢您希望操作的元素：

通過使用 getElementById() 和 getElementsByTagName() 方法

通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性

getElementById()

尋找一個有著給定 id 屬性值的元素，返回值是一個有著給定 id 屬性值的元素節點。如果不存在這樣的元素，它返回 null.

var oElement = document.getElementById ( sID )

該方法只能用於 document 物件

function test(){

var usernameElement=document.getElementById(“tid");

//獲取元素的值

alert("usernameElement.value: "+usernameElement.value)

//獲取元素的型別

alert("usernameElement.type: "+usernameElement.type)

}

getElementsByName()

尋找有著給定name屬性的所有元素，這個方法將返回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等於當前文件裡有著給定name屬性的所有元素的總個數。

</form>

function test(){

var tnameArray=document.getElementsByName("tname");

alert(tnameArray.length);

for(var i=0;i<tnameArray.length;i++){

window.alert(tnameArray[i].value);

}

getElementsByTagName()

尋找有著給定標籤名的所有元素，這個方法將返回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等於當前文件裡有著給定標籤名的所有元素的總個數。

var elements = document.getElementsByTagName(tagName);

var elements = element.getElementsByTagName(tagName);

該方法不必非得用在整個文件上。它也可以用來在某個特定元素的子節點當中尋找有著給定標籤名的元素。

var container = document.getElementById(“sid”);

var elements = container.getElementsByTagName(“p”);

alert(elements .length);

var inputElements=document.getElementsByTagName("input");

for(var i=0;i<inputElements.length;i++){

if (inputElements.type != 'submit') {

inputElements[i].onchange = function(){

alert(this.value)

};

}

var selectElements=document.getElementsByTagName("select");

for (var i = 0; i < selectElements.length; i++) {

selectElements[i].onchange=function(){

alert(this.value);

}

parentNode、firstChild以及lastChild

這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文件的結構，在文件中進行“短距離的旅行”。

請看下面這個 HTML 片段：

<table>

<tr>

<td>Alaska</td>

</tr>

</table>

在上面的HTML程式碼中，第一個 <td> 是 <tr> 元素的首個子元素（firstChild），而最後一個 <td> 是 <tr>元素的最後一個子元素（lastChild）。

此外，<tr> 是每個 <td>元素的父節點（parentNode）。

var textareaElements=document.getElementsByTagName("textarea");

for (var i = 0; i < textareaElements.length; i++) {

textareaElements[i].onchange = function(){

alert(this.value);

};

}

檢視是否存在子節點

hasChildNodes()

該方法用來檢查一個元素是否有子節點，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文字節點和屬性節點不可能再包含任何子節點，所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.

如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空陣列和空字串。

hasChildNodes()

var selectElements=document.getElementsByTagName("select");

alert(selectElements[0].hasChildNodes())

var inputElements=document.getElementsByTagName("input");

for(var i=0;i<inputElements.length;i++){

alert(inputElements[i].hasChildNodes());

}

根節點

有兩種特殊的文件屬性可用來訪問根節點：

document.documentElement

document.body

第一個屬性可返回存在於 XML 以及 HTML 文件中的文件根節點。

第二個屬性是對 HTML 頁面的特殊擴充套件，提供了對 <body> 標籤的直接訪問。

Javascript指令碼語言簡介、查詢元素節點、檢視是否存在子節點、根節點

Javascript指令碼語言簡介、查詢元素節點、檢視是否存在子節點、根節點 1、Js中的的dom的元素節點和文字節點 DOM是Document Object Model文件物件模型的縮寫。根據W3C DOM規範,DOM是一種與瀏覽器，平臺，語言無關的介面，使得你可以訪問頁面其他的標準組件

（C語言）BinarySrearchTree二叉搜尋樹 --- 標準插入（遞迴，非遞迴）、遍歷（前，中，後序）、查詢（遞迴，非遞迴）、根插入遞迴（左旋，右旋）、最小最大值、刪除節點

1 #include <stdio.h> 2 #include <stdlib.h> 3 4 struct node{ 5 int data; 6 struct node *left; 7

指令碼語言簡介

Lua 教程 Lua 是一種輕量小巧的指令碼語言，用標準C語言編寫並以原始碼形式開放，其設計目的是為了嵌入應用程式中，從而為應用程式提供靈活的擴充套件和定製功能。 Lua 是巴西里約熱內盧天主教大學（Pontifical Catholic University of Rio de J

JavaScript指令碼語言的使用

JavaScript指令碼語言一、瞭解JavaScript 1、什麼是JavaScript:一種基於物件和事件驅動並具有安全效能的解釋型指令碼語言，在Web應用開發中非常廣泛的應用。它不需要編譯，直接嵌入在HTTP頁面中，把靜態頁面轉變為支援使用者互動並響應應用事件的動態頁面。在Java

Java中原生解析JavaScript指令碼語言

前言由於一些需求，現在需要在Java中解析字串，做一些簡單的算數運算和邏輯運算，那麼最先想的是模板引擎這個東西，但是Java中的模板引擎是針對View層的，也就是JSP的，在Service層中使用不是太方便，因此選用了原生的JavaScript指令碼解析引擎。實際上Jav

JavaScript指令碼語言介紹並實現第一個Hello World程式

1.JavaScript是Web頁面中的一種指令碼程式語言，也是一種通用的、跨平臺的、基於物件和事件驅動並具有安全性的指令碼語言，具有與Java類似的語法。它不需要進行編譯，而是直接嵌入在HTML頁面中，把靜態頁面轉變成支援使用者互動並響應相應事件的動態頁面，JavaS

Sqlserver查詢包含某個文本的存儲過程、函數、視圖等

查詢 fin 原創文章字符串 left sch 過程 tex ews 在Sqlserver2012數據庫中，可以通過SQL語句查詢包含某個字符串文本的所有數據庫對象，比如存儲過程、視圖、自定義函數以及觸發器等等，通過一條SQL語句即可查出所有包含此文本的數據庫對象。SQL

JavaScript語言簡介

基本語法 ack 使用客戶端語句書寫格式要求可讀性 scrip Web程序不論是B/S還是C/S構架，分為客戶端程序與服務器端程序兩種。 ASP.NET是開發服務器端程序的強大工具，但有時為了降低服務器負擔與通信流量，這就需要編寫能夠在客戶端執行的程序。腳

009-elasticsearch【三】示例數據導入、URI查詢方式簡介、Query DSL簡介、查詢簡述【_source、match、must、should等】、過濾器、聚合

ase emp -h 集合 shard ken 結果 employ 5.1 一、簡單數據客戶銀行賬戶信息，json { "account_number": 0, "balance": 16623, "firstname": "Brad

Javascript入門(二)變量、獲取元素、操作元素

javascrip ima 報錯 nload change -c win attribute ttr 一、變量 Javascript 有五種基本數據類型 number、String、boolean、undefined、null 一種復合類型：object

Go語言開發（一）、Go語言簡介

Go語言簡介Go語言開發（一）、Go語言簡介一、Go語言簡介 1、Go語言簡介 Go，全稱golang，是Google開發的一種靜態強類型、編譯型、並發型並具有垃圾回收功能的編程語言。 Go從2007年末由Robert Griesemer、Rob Pike、Ken Thompson（C語言發明者）主持開發

【指令碼語言】RINGO JS簡介

Ringo 101 為了讓使用者更高效地編寫和執行 Javascript 指令碼，我們在 Total Control 指令碼環境中集成了 RingoJS 框架，使用者可在指令碼中直接引入並使用 RingoJS 提供的大量豐富的庫。例如：如果您想在指令碼中使用 RingoJS 模組 fs 中的方

【JS API】指令碼語言-裝置控制介面說明-查詢有多少種不同的顏色

裝置控制介面說明-查詢有多少種不同的顏色 getColorCount 原型： getColorCount(topLeftX, topLeftY, bottomRightX, bottomRightY) 是否支援多裝置：不支援對應的 REST API: 在指定區域內查詢

Leetcode演算法——34、有序陣列查詢元素的首尾位置

給定一個升序整數陣列，找到一個目標值的起始和結束位置。如果目標值不存在，則返回 [-1,-1]。示例： Example 1: Input: nums = [5,7,7,8,8,10], target = 8 Output: [3,4] Example 2: Input:

Java查詢陣列重複元素，並列印重複元素、重複次數、重複元素位置

面試題查詢重複元素並列印重複次數和重複位置，一頓懵逼，回來死磕寫下來，列印指定重複次數和最大次數，其他在此基礎上可以再更新 package sort;import org.testng.annotations.Test;import sun.org.mozilla.javascript.interna

【學習筆記】平衡二叉樹（AVL樹）簡介及其查詢、插入、建立操作的實現

目錄平衡二叉樹簡介：各種操作實現程式碼：詳細內容請參見《演算法筆記》P319 初始AVL樹，一知半解，目前不是很懂要如何應用，特記錄下重要內容，以供今後review。平衡二叉樹簡介：平衡二叉樹由兩位前

MyBatis中resultType、resultMap元素和分步關聯查詢

MyBatis select標籤，常用元素有：id、parameterType、resultType、resultMap， id:配合Mapper的全限定名，聯合成為一個唯一的標識，使用者標識這條SQL。 parameterType：表示這條SQL接受的引數型別，可以是MyBatis系統定

資料庫系統概論03-關係資料庫標準語言SQL&模式、基本表、檢視操作&連線、查詢刪改語句

3.1關係資料庫標準語言SQL （Structured Query Language ）結構化查詢語言資料查詢：SELECT 資料定義：CREATE\DROP 資料操縱：INSERT\UPDATE\DELETE 資料控制：GRANT\REVOKE 3.1.1 資料定義

編譯語言、解釋語言與指令碼語言之間的區別【轉】

資料一： 1、解釋型語言與編譯型語言的區別翻譯時間的不同。。編譯型語言在程式執行之前，有一個單獨的編譯過程，將程式翻譯成機器語言，以後執行這個程式的時候，就不用再進行翻譯了。解釋型語言，是在執行的時候將程式翻譯成機器語言，所以執行速度相對於編譯型語言要慢。 C/C+

20181212——Javascript高階語言程式設計，第一章Javascript簡介

javascript包含核心ECMAScript 文件物件DOM 瀏覽器物件BOM DOM是針對XML但經過擴充套件用於HTML的應用程式程式設計入口（API），DOM把整個頁面對映為一個多層節點結構。HTML和XML的每個組成部分都是某種型別的節點，這些節點又包括了不同型別的結構的資料

Javascript指令碼語言簡介、查詢元素節點、檢視是否存在子節點、根節點

相關推薦