首頁 web前端 js教程 Document 对象的常用方法_基础知识

Document 对象的常用方法_基础知识

May 16, 2016 pm 06:48 PM
document 物件

1、getElementById(id)
通过元素的ID访问元素,这是DOM一个基础的访问页面元素的方法,我们要经常用到它.
例如下面的例子,我们可以同DIV的ID迅速的访问到它,而不必通过DOM层层遍历,
复制代码 代码如下:


h


Just for testing;


Just for testing;

<script> <BR>var div=document.getElementById(‘divid'); <BR>alert(div.nodeName); <BR></script>


注意使用这个函数时如果元素的ID不是唯一的,那么会获得第一个符合条件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID,也会被访问到
例如下面的例子中,获得的元素是input:
复制代码 代码如下:




Just for testing;

<script> <BR>var div=document.getElementById('divid'); <BR>alert(div.nodeName); <BR></script>


2、getElementsByName(name)
返回名字是name的元素数组,在IE6中元素ID匹配这个名字的话,这个元素也将包括在内,而且getElementsByName()仅用于象input,radio,checkbox等元素对象。
象下面例子中georges数组的长度应该是0。
复制代码 代码如下:


f

f




3、getElementsByTagName(tagname)
getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表(数组)。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构,使用这种方法可以很容易的所有缩小范围。
复制代码 代码如下:




<script> <BR>function start() { <BR>// 获得所有tagName是body的元素(当然每个页面只有一个) <BR>myDocumentElements=document.getElementsByTagName("body"); <BR>myBody=myDocumentElements.item(0); <BR>// 获得body子元素种的所有P元素 <BR>myBodyElements=myBody.getElementsByTagName("p"); <BR>// 获得第二个P元素 <BR>myP=myBodyElements.item(1); <BR>//显示这个元素的文本 <BR>alert(myP.firstChild.nodeValue); <BR>} <BR></script>


hi


hello





DOM Element 常用方法
1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点:
复制代码 代码如下:




上面的例子中给DIV添加文本,也可以用newdiv.innerHTML=”A new div”实现,
不过innerHTML不属于DOM
2、removeChild(childreference)
移除当前节点的子节点,返回被移除的节点。这个被移除的节点可以被插入document树中别的地方
复制代码 代码如下:

A child



3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点,这个复制得到的节点是一个孤立的节点,不在document树中。复制原来节点的属性值,包括ID属性,所以在把这个新节点加到document之前,一定要修改ID属性,以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数,当deepBoolean设置true时,复制 当前节点的所有子节点,包括该节点内的文本。
复制代码 代码如下:

11111


p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);

4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如:
复制代码 代码如下:

span



5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置。
复制代码 代码如下:


熊掌我所欲也!



6、click()
执行元素的一次点击,可以用于通过脚本来触发onClick函数
复制代码 代码如下:

<script> <BR>function wow() { <BR>alert("我好象没有点鼠标啊"); <BR>} <BR></script>
hhh



DOM Element的属性:(下面是常用的。IE5.0以上,mozllia都支持的)
1、childeNodes 返回所有子节点对象,
例如
复制代码 代码如下:





一个和尚有水喝。
两个和尚挑水喝。
三个和尚没水喝。

<script> <BR>var msg=”” <BR>var mylist=document.getElementById("mylist") <BR>for (i=0; i<mylist.childNodes.length; i++){ <BR>var tr=mylist.childNodes[i]; <BR>for(j=0;j<tr.childNodes[j].length; j++) { <BR>var td=tr.childNodes[j]; <BR>msg+=td.innerText; <BR>} <BR>} <BR>alert(msg); <BR></script>

2、innerHTML
这是一个事实上的标准,不属于w3c DOM,但是几乎所有支持DOM的浏览器,都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。
复制代码 代码如下:

新人类,什么?!




3、style
返回一个元素的style对象的引用,通过它我们可以获得并修改每个单独的样式。
例如下面的脚本可以修改一个元素的背景色
document.getElementById("test").style.backgroundColor="yellow"
4、firstChild 返回第一个子节点
5、lastChild 返回最后一个子节点
6、parentNode 返回父节点的对象。
7、nextSibling 返回下一个兄弟节点的对象
8、previousSibling 返回前一个兄弟节点的对象
9、nodeName 返回节点的HTML标记名称,使用英文的大写字母,如P, FONT
例如
复制代码 代码如下:

ddd

<script> <BR>if (document.getElementById("test").nodeName=="DIV") <BR>alert("This is a DIV"); <BR></script>

第一个例子:
使用DOM1.0 的javascript动态地创建一个HTML table。
复制代码 代码如下:


Sample code
<script> <BR>function start() { <BR>//获得body的引用 <BR>var mybody=document.getElementsByTagName("body").item(0); <BR>//创建一个<table>元素 <BR>mytable = document.createElement("TABLE"); <BR>//创建一个<TBODY>元素 <BR>mytablebody = document.createElement("TBODY"); <BR>// 创建行列 <BR>for(j=0;j<3;j++) { <BR>//创建一个<TR>元素 <BR>mycurrent_row=document.createElement("TR"); <BR>for(i=0;i<3;i++) { <BR>//创建一个<TD>元素 <BR>mycurrent_cell=document.createElement("TD"); <BR>//创建一个文本元素 <BR>currenttext=document.createTextNode("cell is row "+j+", column "+i); <BR>//把新的文本元素添加到单元TD上 <BR>mycurrent_cell.appendChild(currenttext); <BR>// appends the cell TD into the row TR <BR>//把单元TD添加到行TR上 <BR>mycurrent_row.appendChild(mycurrent_cell); <BR>} <BR>//把行TR添加到TBODY上 <BR>mytablebody.appendChild(mycurrent_row); <BR>} <BR>// 把 TBODY 添加到 TABLE <BR>mytable.appendChild(mytablebody); <BR>// 把 TABLE 添加到 BODY <BR>mybody.appendChild(mytable); <BR>// 把mytable的border 属性设置为2 <BR>mytable.setAttribute("border","2"); <BR>} <BR></script>



本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

使用PHP的json_encode()函數將陣列或物件轉換為JSON字串 使用PHP的json_encode()函數將陣列或物件轉換為JSON字串 Nov 03, 2023 pm 03:30 PM

JSON(JavaScriptObjectNotation)是一種輕量級的資料交換格式,已成為Web應用程式之間資料交換的常用格式。 PHP的json_encode()函數可以將陣列或物件轉換為JSON字串。本文將介紹如何使用PHP的json_encode()函數,包括語法、參數、傳回值以及具體的範例。語法json_encode()函數的語法如下:st

使用Python的__contains__()函數定義物件的包含操作 使用Python的__contains__()函數定義物件的包含操作 Aug 22, 2023 pm 04:23 PM

使用Python的__contains__()函數定義物件的包含操作Python是一種簡潔而強大的程式語言,提供了許多強大的功能來處理各種類型的資料。其中之一是透過定義__contains__()函數來實現物件的包含操作。本文將介紹如何使用__contains__()函數來定義物件的包含操作,並且給予一些範例程式碼。 __contains__()函數是Pytho

如何將 MySQL 查詢結果陣列轉換為物件? 如何將 MySQL 查詢結果陣列轉換為物件? Apr 29, 2024 pm 01:09 PM

將MySQL查詢結果陣列轉換為物件的方法如下:建立一個空物件陣列。循環結果數組並為每一行建立一個新的物件。使用foreach迴圈將每一行的鍵值對賦給新物件的對應屬性。將新物件加入到物件數組中。關閉資料庫連線。

原始碼探針:Python 中物件是如何被呼叫的? 原始碼探針:Python 中物件是如何被呼叫的? May 11, 2023 am 11:46 AM

楔子我們知道物件被創建,主要有兩種方式,一種是透過Python/CAPI,另一種是透過呼叫類型物件。對於內建類型的實例物件而言,這兩種方式都是支援的,例如列表,我們即可以透過[]創建,也可以透過list(),前者是Python/CAPI,後者是呼叫類型物件。但對於自訂類別的實例物件而言,我們只能透過呼叫類型物件的方式來創建。而一個物件如果可以被調用,那麼這個物件就是callable,否則就不是callable。而決定一個物件是不是callable,就取決於其對應的型別物件中是否定義了某個方法。如

PHP 函數如何傳回物件? PHP 函數如何傳回物件? Apr 10, 2024 pm 03:18 PM

PHP函數可以透過使用return語句後接物件實例來傳回對象,從而將資料封裝到自訂結構中。語法:functionget_object():object{}。這允許創建具有自訂屬性和方法的對象,並以對象的形式處理資料。

document.cookie取得不到怎麼解決 document.cookie取得不到怎麼解決 Nov 23, 2023 am 10:02 AM

document.cookie取得不到的解決方法:1、瀏覽器的隱私設定;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代碼錯誤;5、Cookie不存在或過期;6、跨域問題; 7.檢視器模式;8、伺服器問題;9、JavaScript執行時機;10、檢查console log等。

使用Python的__le__()函數定義兩個物件的小於等於比較 使用Python的__le__()函數定義兩個物件的小於等於比較 Aug 21, 2023 pm 09:29 PM

標題:使用Python的__le__()函數定義兩個物件的小於等於比較在Python中,我們可以透過使用特殊方法來定義物件之間的比較操作。其中之一就是__le__()函數,它用來定義小於等於比較。 __le__()函數是Python中的一個魔法方法,並且是一種用於實現「小於等於」操作的特殊函數。當我們使用小於等於運算子(&lt;=)比較兩個物件時,Python

C++ 函式回傳物件時有什麼需要注意的? C++ 函式回傳物件時有什麼需要注意的? Apr 19, 2024 pm 12:15 PM

在C++中,函數傳回物件需要注意三點:物件的生命週期由呼叫者負責管理,以防止記憶體洩漏。避免懸垂指針,透過動態分配記憶體或返回物件本身來確保物件在函數返回後仍然有效。編譯器可能會最佳化傳回物件的副本生成,以提高效能,但如果物件是值語義傳遞的,則無需副本生成。

See all articles