javaScript DOM編程常用的方法與屬性

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


Node接口的特性和方法

特性/方法類型/放回類型說明
nodeName String 節點的名字;根據節點的類型而定義
nodeValueString 節點的值;根據節點的類型而定義
nodeType Number 節點的類型常量值之一
ownerDocument Document 指向這個節點所屬的文檔
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
insertBefore (newnode, refnode)Node 在childNodes中的refnode之前插入newnode


hasChildNodes()?-- 查看是否存在子節點
該方法用來檢查一個元素是否有子節點,返回值是 true 或 false.

var booleanValue = element.hasChildNodes();
文本節點和屬性節點不可能再包含任何子節點,所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.


replaceChild() -- 節點替換
把一個給定父元素里的一個子節點替換為另外一個子節點

var reference = element.replaceChild(newChild,oldChild);
返回值是一個指向已被替換的那個子節點的引用指針。
如果被插入的子節點還有子節點,則那些子節點也被插入到目標節點中


getAttribute() ? -- 查找屬性節點
返回一個給定元素的一個給定屬性節點的值

var attributeValue = element.getAttribute(attributeName);
給定屬性的名字必須以字符串的形式傳遞給該方法。
給定屬性的值將以字符串的形式返回,如果給定屬性不存在,getAttribute() 將返回一個空字符串.


setAttribute() -- 設置屬性節點
將給定元素節點添加一個新的屬性值或改變它的現有屬性的值。

 element.setAttribute(attributeName,attributeValue);
屬性的名字和值必須以字符串的形式傳遞給此方法
如果這個屬性已經存在,它的值將被刷新;
如果不存在,setAttribute()方法將先創建它再為其賦值。


createElement() -- 創建新元素節點
按照給定的標簽名創建一個新的元素節點。方法只有一個參數:將被創建的元素的名字,是一個字符串.

var reference = document.createElement(element);
方法的返回值:是一個指向新建節點的引用指針。返回值是一個元素節點,所以它的 nodeType 屬性值等于 1。
新元素節點不會自動添加到文檔里,新節點沒有 nodeParent 屬性,它只是一個存在于 JavaScript 上下文的對象.
var pElement = document.createElement("p");


createTextNode() -- 創建新文本節點
創建一個包含著給定文本的新文本節點。這個方法的返回值是一個指向新建文本節點引用指針。
? var textNode = document.createTextNode(text);
方法只有一個參數:新建文本節點所包含的文本字符串
方法的返回值:是一個指向新建節點的引用指針。它是一個文本節點,所以它的 nodeType 屬性等于 3.
新元素節點不會自動添加到文檔里,新節點沒有 nodeParent 屬性

var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);


appendChild() -- 插入節點(1)
為給定元素增加一個子節點: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ?var newreference = element.appendChild(newChild). ? ? ? ? ? ? ?
? ?給定子節點 newChild 將成為給定元素節點 element 的最后一個子節點。
方法的返回值是一個指向新增子節點的引用指針。
該方法通常與 createElement() createTextNode() 配合使用
新節點可以被追加給文檔中的任何一個元素

 var newliElement=document.createElement("li");var textNode=document.createTextNode("北京");newliElement.appendChild(textNode);document.body.appendChild(newliElement);var liElement=document.getElementsByTagName("li");var textValue=liElement[0].firstChild.nodeValue;alert(textValue);


insertBefore()?-- 插入節點(2)
把一個給定節點插入到一個給定元素節點的給定子節點的前面
var reference =  element.insertBefore(newNode,targetNode);
節點 newNode 將被插入到元素節點 element 中并出現在節點 targetNode 的前面.
節點 targetNode 必須是 element 元素的一個子節點。
該方法通常與 createElement() 和 createTextNode() 配合使用

<ul id="city">     <li value="beijing^" id="beijing">北京</li>        </ul>
<ul id="city01">   <li value="shanghai^" id="shanghai">上海</li>          </ul>//獲取父節點var parentCityNode=document.getElementById("city");//獲取子節點var beijingNode=document.getElementById("beijing");var shanghaiNode=document.getElementById("shanghai");//插入parentCityNode.insertBefore(shanghaiNode,beijingNode);


removeChild() -- 刪除子節點
從一個給定元素里刪除一個子節點
var reference = element.removeChild(node);
返回值是一個指向已被刪除的子節點的引用指針。
某個節點被removeChild()方法刪除時,這個節點所包含的所有子節點將同時被刪除。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var ulElement=document.getElementById("city");
var liElement=document.getElementById("beijing");
ulElement.removeChild(liElement);
如果想刪除某個節點,但不知道它的父節點是哪一個,parentNode 屬性可以幫忙。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var liElement=document.getElementById("beijing");
var parentElement=liElement.parentNode;
parentElement.removeChild(liElement);


ChildNodes -- 遍歷節點樹

ChildNodes:返回一個數組,這個數組由給定元素節點的子節點構成:

var nodeList = node.childNodes;
文本節點和屬性節點都不可能再包含任何子節點,所以它們的 ChildNodes 屬性永遠會返回一個空數組。
如果想知道某個元素有沒有子節點,可以用 hasChildNodes 方法。
如果想知道某個元素有多少個子節點,可以用 childNodes 數組的 length 屬性。
childNodes 屬性是一個只讀屬性。


firstChild -- 獲取第一個子節點

firstChild:該屬性返回一個給定元素節點的第一個子節點,返回這個節點對象的指針。

var reference = node.firstChild;
文本節點和屬性節點都不可能包含任何子節點,所以它們的 firstChild 屬性永遠會返回 null。
某個元素的 firstChild 屬性等價于這個元素的 childNodes 節點集合中的第一個節點,即:
var reference = node.ChildNodes[0];
firstChild 屬性是一個只讀屬性。


lastChild:獲取最后一個子節點。

nextSibling: 返回一個給定節點的下一個兄弟節點。

previousSibling:返回一個給定節點的上一個兄弟節點。

parentNode:返回一個給定節點的父節點。
parentNode 屬性返回的節點永遠是一個元素節點,因為只有元素節點才有可能包含子節點。
document 節點的沒有父節點。



Document 對象的集合

集合描述
all[]提供對文檔中所有 HTML 元素的訪問。
anchors[]返回對文檔中所有 Anchor 對象的引用。
applets返回對文檔中所有 Applet 對象的引用。
forms[]返回對文檔中所有 Form 對象引用。
images[]返回對文檔中所有 Image 對象引用。
links[]返回對文檔中所有 Area 和 Link 對象引用。

Document 對象的屬性

屬性描述
body提供對 <body> 元素的直接訪問。對于定義了框架集的文檔,該屬性引用最外層的 <frameset>。
cookie設置或返回與當前文檔有關的所有 cookie。
domain返回當前文檔的域名。
lastModified返回文檔被最后修改的日期和時間。
referrer返回載入當前文檔的文檔的 URL。
title返回當前文檔的標題。
URL返回當前文檔的 URL。

Document 對象的方法

方法描述
close()關閉用 document.open() 方法打開的輸出流,并顯示選定的數據。
getElementById()返回對擁有指定 id 的第一個對象的引用。
getElementsByName()返回帶有指定名稱的對象集合。
getElementsByTagName()返回帶有指定標簽名的對象集合。
open()打開一個流,以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
write()向文檔寫 HTML 表達式 或 JavaScript 代碼。
writeln()等同于 write() 方法,不同的是在每個表達式之后寫一個換行符。



本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/373825.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/373825.shtml
英文地址,請注明出處:http://en.pswp.cn/news/373825.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一:驗證微信的Token

前言:申請到微信公眾號的同學&#xff0c;可能會挺感興趣的&#xff0c;畢竟微信公眾號&#xff0c;確實是一個好東西&#xff0c;它提供了一個很好的平臺&#xff0c;而且它自帶有一套管理模板&#xff0c;對于微信公眾號可以很好的管理。 但是也僅僅是很好的管理&#xff0c;…

三、 將DataTable 轉換為List

1. 方法public static IList<T> ConvertTo<T>(DataTable table) { if (table null) { return null; } List<DataRow> rows new List<DataRow>(); foreach (DataRow row in table.Rows) { rows.Add(row); } return ConvertTo<T>(rows); }2. 調用…

ActiveMQ已準備好黃金時段

ActiveMQ項目始于2005年-在很大程度上&#xff0c;它一直是Apache Software Foundation的頂級項目。 ActiveMQ項目的目的一直是提供世界一流的企業消息傳遞解決方案&#xff0c;其中經紀人能夠提供從支持IP的智能設備一直到企業后端的高可用性的連通性。 ActiveMQ提供跨語言客戶…

r語言 adf檢驗_r語言中如何進行兩組獨立樣本秩和檢驗

r語言中如何進行兩組獨立樣本秩和檢驗?tecdat.cn安裝所需的包wants <- c("coin") has <- wants %in% rownames(installed.packages()) if(any(!has)) install.packages(wants[!has])>一個樣本測試set.seed(123) medH0 <- 30 DV <- sample(0:100, 20,…

MyEclipse 8.5安裝Aptana

Aptana簡介 Aptana是一個非常強大,開源,專注于JavaScript的Ajax開發IDE它的特性包括&#xff1a; 1、JavaScript,JavaScript函數,HTML,CSS語言的Code Assist功能 2、Outliner(大綱)&#xff1a;顯示JavaScript,HTML和CSS的代碼結構 3、支持 JavaScript&#xff0c…

2016-1-10 手勢解鎖demo的實現

一&#xff1a;實現自定義view&#xff0c;在.h,.m文件中代碼如下: #import <UIKit/UIKit.h> class ZLLockView; protocol ZLLockViewDelegate <NSObject> - (void)lockView:(ZLLockView *)lockView didSelectedPwd: (NSString *)pwd; end interface ZLLockView : …

php與JAVA的RSA加密互通

Java 版本RSA 進行加密解密 在網上查詢了好幾天&#xff0c;最終找到解決方案&#xff0c;網絡上都是通過Cipher.getInstance("RSA"); 而改成Cipher.getInstance("RSA/ECB/PKCS1Padding");就可以實現與php版本公鑰和密鑰互通了。 Cipher cipher Cipher.ge…

GWT入門

GWT是Google Web Development Kit的縮寫&#xff0c;可讓程序員使用Java開發Ajax Web應用程序。 GWT編譯器將Java代碼轉換為JavaScript和html代碼。 GWT應用程序稱為模塊&#xff0c;并且使用xml文件描述模塊&#xff0c;假定該模塊名稱為xml文件的“ mymodule”名稱為“ mymod…

JavaScript省市二級聯動

XML文件負責保存所需要的數據&#xff0c;而HTML文件負責通過javascript解析XML數據并顯示在頁面上。代碼如下&#xff1a; cities.xml <?xml version"1.0" encoding"GB2312"?> <china><province name"吉林省"><city>…

poj 3579 Median 二分套二分 或 二分加尺取

MedianTime Limit: 1000MS Memory Limit: 65536KTotal Submissions: 5118 Accepted: 1641Description Given N numbers, X1, X2, ... , XN, let us calculate the difference of every pair of numbers: ∣Xi - Xj∣ (1 ≤ i &#xff1c; j ≤ N). We can get C(N,2)differenc…

qt 嵌入web頁面_Qt嵌入瀏覽器(三)——QWebEngine與Https

本篇簡介&#xff1a;本篇的小目標&#xff1a;挑戰通過Qt WebEngine實現與服務端的Https雙向認證雙向認證&#xff0c;Qt WebEngine和Chromium這里先說結論&#xff1a;挑戰失敗了。至少使用Qt WebEngine目前已實現的組件沒有辦法直接實現雙向認證。先來簡要分析一下實現雙向認…

python模塊;opencv安裝

http://www.lfd.uci.edu/~gohlke/pythonlibs/ 1. 步驟1. 下載Python2.73, 安裝, 并配置Python環境變量:".\Program Files\Python27;";注意: OpenCV僅支持2.6&2.7, Python不能使用3.x版本;2. 下載OpenCV2.46, 安裝, 并配置OpenCV環境變量:".\Program Files\o…

Java中的正則表達式–軟介紹

正則表達式是一種可以應用于文本&#xff08;Java中的String&#xff09;的模式。 Java提供了java.util.regex包&#xff0c;用于與正則表達式進行模式匹配。 Java正則表達式與Perl編程語言非常相似&#xff0c;并且非常易于學習。 正則表達式匹配文本&#xff08;或文本的一部…

AJAX入門——工作原理

理解同步交互和異步交互 舉個例子&#xff1a;普通B/S模式(同步) AJAX技術(異步) * 同步&#xff1a; 提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能干任何事。 發送方發出數據后&#xff0c;等接收方發回響應以后才發下一個數據包的…

Couldn’t communicate with a helper application.

出現此問題 的情景 我在提交svn之前&#xff0c;在Xcode中的Images.xcassets里添加了文件夾后又刪除了&#xff0c; 但是 在Xcode中提交的時候&#xff0c;左側勾選文件那一欄中 出現了此文件夾及里邊的文件。 解決&#xff1a; 我在conerstore中將此文件夾 remove后&#xff0…

python 復制文件夾內容 并結構一致_Python比較文件夾比另一同名文件夾多出的文件并復制出來的方法...

本文實例講述了Python比較文件夾比另一同名文件夾多出的文件并復制出來的方法。分享給大家供大家參考。具體如下&#xff1a;這個東東本來是做來給公司數據同步用的&#xff1a;新服務器還沒正式啟用&#xff0c;舊的服務器還在使用&#xff0c;每天都有大量圖片傳到舊服務器上…

css控制頁面文字不能被選中user-select:none;

現象&#xff1a;html中可能有些地方不想讓用戶復制文字&#xff0c;或是用a標簽做了個點擊按鈕&#xff0c;點快的時候文字會被選中&#xff0c;很丑&#xff0c;這個時候可以使用下面的方案禁止文字選中。原因&#xff1a;鼠標點快了文字會被選中。解決方案&#xff1a;不同的…

form表單標簽的enctype屬性的作用

Enctype是指定將數據回發到服務器時瀏覽器使用的編碼類型&#xff0c;其編碼類型有以下三種 一、 application/x-www-form-urlencoded 這是通過表單發送數據時默認的編碼類型。我們沒有在from標簽中設置enctype屬性時默認就是application/x-www-form-urlencoded類型的。…

重溫“ Java Sucks”

總覽 關于Java的不足之處&#xff08;從C開發人員的角度來看&#xff09;的一個有趣的文檔是在一段時間&#xff08;大約2000年前&#xff09;寫的&#xff0c;但是今天許多論點都像十年前一樣真實&#xff08;或不真實&#xff09;。 原始的Java Sucks發布。 短消息回顧 Ja…

Android Studio IDE Out of Memory

場景&#xff1a; 嘗試過各種方式&#xff0c;IDE重裝&#xff0c;重新啟動&#xff0c;設置IDE MEMORY大小JDK MEMORY大小都無效 終于在FILE->INVALIDATE CACHES/RESTART 中點擊重新啟動之后問題攻克了。轉載于:https://www.cnblogs.com/yxwkf/p/5128094.html