utton 對象
Button 對象代表一個按鈕。
在 HTML 文檔中 <button> 標簽每出現一次,Button 對象就會被創建。
accessKey 設置或返回訪問某個按鈕的快捷鍵。
disabled 設置或返回是否禁用按鈕。
form 返回對包含按鈕的表單的引用。
id 設置或返回按鈕的 id。
name 設置或返回按鈕的名稱。
tabIndex 設置或返回按鈕的 Tab 鍵控制次序。
type 返回按鈕的表單類型。
value 設置或返回顯示在按鈕上的文本。
下面的例子可返回按鈕的 tab 鍵控制次序:
<html>
<head>
<script type="text/javascript">
function showTabIndex()
{
var b1=document.getElementById('b1').tabIndex;
var b2=document.getElementById('b2').tabIndex;
var b3=document.getElementById('b3').tabIndex;
document.write("Tab index of Button 1: " + b1);
document.write("<br />");
document.write("Tab index of Button 2: " + b2);
document.write("<br />");
document.write("Tab index of Button 3: " + b3);
}
</script>
</head>
<body>
<button id="b1" tabIndex="1">Button 1</button><br />
<button id="b2" tabIndex="2">Button 2</button><br />
<button id="b3" tabIndex="3">Button 3</button><br />
<br />
<input type="button" onclick="showTabIndex()" value="Show tabIndex" />
</body>
</html>
標準屬性
className 設置或返回元素的 class 屬性。
dir 設置或返回文本的方向。
lang 設置或返回元素的語言代碼。
title 設置或返回元素的 title 屬性。
lang 屬性設置或返回元素的語言。
object.lang=language-code
本例展示了兩種獲取 <body> 元素的語言的方法:
heckbox 對象
Checkbox 對象代表一個 HTML 表單中的 一個選擇框。
在 HTML 文檔中 <input type="checkbox"> 每出現一次,Checkbox 對象就會被創建。
您可以通過遍歷表單的 elements[] 數組來訪問某個選擇框,或者通過使用 document.getElementById() 。
Checkbox 對象的屬性
accessKey 設置或返回訪問 checkbox 的快捷鍵。
alt 設置或返回不支持 checkbox 時顯示的替代文本。
checked 設置或返回 checkbox 是否應被選中。
defaultChecked 返回 checked 屬性的默認值。
disabled 設置或返回 checkbox 是否應被禁用。
form 返回對包含 checkbox 的表單的引用。
id 設置或返回 checkbox 的 id。
name 設置或返回 checkbox 的名稱。
tabIndex 設置或返回 checkbox 的 tab 鍵控制次序。
type 返回 checkbox 的表單元素類型。
value 設置或返回 checkbox 的 value 屬性的值
checked 屬性設置或返回 checkbox 是否應被選中。
checkboxObject.checked=true|false
下面的例子可設置該 checkbox 的狀態:
<html>
<head>
<script type="text/javascript">
function check()
{
document.getElementById("check1").checked=true //1
}
function uncheck()
{
document.getElementById("check1").checked=false //0
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="check1" />
<input type="button" onclick="check()" value="Check Checkbox" />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" />
</form>
</body>
</html>
標準屬性
className 設置或返回元素的 class 屬性。
dir 設置或返回文本的方向。
lang 設置或返回元素的語言代碼。
title 設置或返回元素的 title 屬性。
Checkbox 對象的方法
blur() 從 checkbox 上移開焦點。
click() 模擬在 checkbox 中的一次鼠標點擊。
focus() 為 checkbox 賦予焦點。
復選框全選、全不選、反選
家好,我是IT共享者,人稱皮皮。
相信做網站對JavaScript再熟悉不過了,它是一門腳本語言,不同于Python的是,它是一門瀏覽器腳本語言,而Python則是服務器腳本語言,我們不光要會Python,還要會JavaScript,因為它對做網頁方面是有很大作用的。
這是我們用的最普遍的一個文檔對象了,專門用來操作DOM節點時用。
document.getElementById() #通過id查找HTML元素
document.getElementsByName() #通過name查找HTML元素
document.getElementsByTagName() #通過標簽名查找HTML元素
document.getElementsByClassName() #通過類名查找HTML元素
document.querySelector(".h") #第一個類名為 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class為"no"或者id為"h"的div元素
document.body #獲取body標簽
document.documentElement #獲取html標簽
document.cookie #網頁cookie
document.domain #文檔的域名
document.lastModified #文檔被最后修改的日期和時間
document.referrer #載入當前文檔的文檔的URL
document.title #當前文檔的標題
document.URL #當前文檔的URL
document.doctype #當前文檔的doctype
document.baseURI #當前文檔的絕對URI
document.documentMode #瀏覽器使用的模式
document.documentURI #文檔的URI
document.implementation #DOM實現
document.inputEncoding #文檔的編碼(字符集)
document.readyState #文檔的(加載)狀態
document.strictErrorChecking #是否強制執行錯誤檢查
document.write('hello world') 向文檔寫入文本
document.writeln('hello world') 向文檔寫入文本并換行
document.all #所有html元素
document.anchors #所有Anchor引用
document.forms #所有的表單引用
document.images #所有的圖片引用
document.links #所有的超鏈接引用
document.scripts #所有的腳本引用
document.embeds #所有的流媒體引用
childNodes #獲取子節點的集合 ,返回數組 ,并把換行和空格也當成是節點信息。
children #獲取子節點的集合 ,返回數組
firstChild #獲取第一個子元素 并把換行和空格也當成是節點信息
firstElementChild #獲取第一個子節點
lastChild #獲取最后一個子節點 并把換行和空格也當成是節點信息
lastElementChild #獲取最后一個子節點
parentNode #獲取父節點
parentElement #獲取父節點(IE)
offsetParent #獲取所有父節點 對應的值是body下的所有節點信息
previousSibling #獲取上一個兄弟節點 匹配字符,包括換行和空格,而不是節點
previousElementSibling #獲取上一個兄弟節點 直接匹配節點
nextSibling #獲取下一個兄弟節點 匹配字符,包括換行和空格,而不是節點
nextElementSibling #獲取下一個兄弟節點 直接匹配節點
ownerDocument #元素的根節點
這里我們獲取到了所有的Div元素,我們可以針對性的獲取一個ID下的Div的子元素以及它的兄弟和父,子元素,如下:
我們可以自定義節點并添加值,不過要將它添加到文檔中去,所以必須添加節點,一般和下方的增加節點配套使用。
document.createElement(標簽) #創建HTML元素
document.createTextNode(文本) #給文檔添加文本
document.createComment(文本) #創建一個注釋節點
document.createDocumentFragment() #創建文檔粉碎節點
appendChild(節點) #節點被添加到元素的末尾
insertBefore(a,b) #a節點會插入b節點的前面
removeChild(節點名) #被移除的節點仍在文檔中,只是文檔中已沒有其位置了
replaceChild(插入的節點,被替換的節點)
a.cloneChild() #復制a節點,復制出來的節點作為返回值為true時,則a元素后代也一并復制。否則,僅復制a元素本身
#節點類型 nodeType 有三種情況
#1.元素節點 2.屬性節點 3.文本節點
#節點名稱 nodeName
#節點值 nodeValue
#元素節點沒節點值,為null
#文本節點的節點值就是文本
#屬性節點的節點值就是該屬性值
#節點屬性獲取
a.width
a['width']
a.gerAttribute(屬性名) 返回指定的屬性值
a.gerAttributeNode(屬性名) 返回指定的屬性節點
節點屬性設置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的屬性
a.setAttributeNode(b) 添加指定的屬性節點
#節點屬性刪除
a.removeChild(子節點) 從元素中移除子節點
a.removeAttribute(屬性) 從元素中移除指定屬性
a.removeAttributeNode(屬性) 移除指定的屬性節點,并返回被移除的節點
a.id 獲取當前元素的id
a.className 獲取當前元素的class
a.classList 獲取當前元素的class列表
a.accessKey='w' 設置或返回元素的快捷鍵
a.namespaceURI 返回指定節點的命名空間的 URI
a.dir 設置或返回元素的內容是否可編輯
a.normalize() 合并元素中相鄰的文本節點,并移除空的文本節點
a.tabIndex='3' 設置或返回元素的tab鍵控制次序
a.tagName 返回元素的標簽名
a.textContent 設置或返回節點及其子代的文本內容
a.title 設置或返回元素的標題屬性
a.item(num) 返回節點列表中位于指定下標的節點
a.length 返回節點列表中的節點數
a.innerHTML 獲取或者設置對象內的HTML
a.innerText 獲取或者設置對象內的文本
a.outerHTML 獲取或者設置對象外的HTML
a.outerText 獲取或者設置對象外的文本
a.value 獲取或者設置表單元素的值
這篇文章主要介紹了JavaScript的文檔對象。下一篇文章,我們繼續介紹JavaScript,敬請期待!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。