DOM節點的屬性和方法
HTML DOM Element 物件
HTML DOM 節點
在 HTML DOM (文件物件模型)中,每個部分都是節點:
- 文件本身是文件節點
- 所有 HTML 元素是元素節點
- 所有 HTML 屬性是屬性節點
- HTML 元素內的文字是文字節點
- 註釋是註釋節點
Element 物件
在 HTML DOM 中,Element 物件表示 HTML 元素。
Element 物件可以擁有型別為元素節點、文字節點、註釋節點的子節點。
NodeList 物件表示節點列表,比如 HTML 元素的子節點集合。
元素也可以擁有屬性。屬性是屬性節點(參見下一節)。
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
屬性和方法
1. accessKey
設定或返回元素的快捷鍵
快捷鍵規定啟用元素或使元素獲得焦點的快捷鍵。
註釋:在不同的瀏覽器中訪問快捷鍵的方式各有不同:
不過在大多數瀏覽器中,可以將快捷鍵設定為其他組合。
提示:如果超過一個元素擁有相同的快捷鍵,那麼:
- IE, Firefox: 啟用下一個被按下快捷鍵的元素
- Chrome, Safari:啟用最後一個被按下快捷鍵的元素
- Opera: 啟用第一個被按下快捷鍵的元素
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.accessKey=accessKey
<html>
<head>
<script>
function accesskey()
{
document.getElementById('w3s').accessKey="w"
}
</script>
</head>
<body onload="accesskey()">
<a id="w3s" href="http://www.w3school.com.cn/">W3School</a>
</body>
</html>
2. appendChild()
向節點新增最後一個子節點
提示:如果您需要建立包含文字的新段落,請記得新增到段落的文字的文字節點,然後向文件新增該段落。您也可以使用 appendChild() 方法從一個元素向另一個元素中移動元素。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.appendChild(node)
引數
- 必需
- node 您希望新增的節點物件。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div"></div>
<button onclick="Event()">點我吧</button>
</body>
<script>
function Event(){
var Dom_p = document.createElement('p');
var text = document.createTextNode("1213"); //Document中的物件例項 createTextNode
Dom_p.appendChild(text);
div.appendChild(Dom_p);
}
</script>
</html>
3. attributes
返回指定節點的屬性集合,即 NamedNodeMap
提示:您可以使用 length 屬性來確定屬性的數量,然後您就能夠遍歷所有的屬性節點並提取您需要的資訊。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
註釋:在 Internet Explorer 8 以及更早的版本中,attributes 屬性會返回元素所有可能屬性的集合。
用法
node.attributes
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">點我吧</button>
</body>
<script>
function Event(){
var Dom_p = document.createElement('p');
var attr = div.attributes;
var text = "";
for(let i = 0; i< attr.length;i++){
text += attr[i].nodeValue + " ";
}
Dom_p.innerText += text;
div.appendChild(Dom_p);
}
</script>
</html>
4. childNodes
返回節點的子節點集合,以 NodeList 物件
提示:您可以使用 length 屬性來確定子節點的數量,然後您就能夠遍歷所有的子節點並提取您需要的資訊。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
element.childNodes
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">點我吧</button>
</body>
<script>
function Event(){
console.log(document.body.childNodes);
}
</script>
</html>
5. className
設定或返回元素的 class 屬性
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.className=classname
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">點我吧</button>
</body>
<script>
function Event(){
div.className = "ddd"
}
</script>
</html>
6. clientHeight
返回元素的可見高度
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.clientHeight
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">點我吧</button>
</body>
<script>
function Event(){
alert(div.clientHeight);
}
</script>
</html>
7. clientWidth
返回元素的可見高度
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.clientWidth
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">點我吧</button>
</body>
<script>
function Event(){
alert(div.clientWidth);
}
</script>
</html>
8. cloneNode()
建立節點的拷貝,並返回該副本
cloneNode() 方法克隆所有屬性以及它們的值。
如果您需要克隆所有後代的屬性,請把 deep 引數設定 true,否則設定為 false。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.cloneNode(deep)
引數
- 可選
- deep 預設是 false。
- 設定為 true,如果您需要克隆節點及其屬性,以及後代
- 設定為 false,如果您只需要克隆節點及其後代
返回值
- 設定為 false,如果您只需要克隆節點及其後代
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()">點我吧</button>
</body>
<script>
function Event(){
var cloneDiv = div.cloneNode();
div.appendChild(cloneDiv)
}
</script>
</html>
9. compareDocumentPosition()
比較兩個節點,並返回描述它們在文件中位置的整數
返回值
- 1:沒有關係,兩個節點不屬於同一個文件。
- 2:第一節點(P1)位於第二個節點後(P2)。
- 4:第一節點(P1)定位在第二節點(P2)前。
- 8:第一節點(P1)位於第二節點內(P2)。
- 16:第二節點(P2)位於第一節點內(P1)。
- 32:沒有關係,或是兩個節點是同一元素的兩個屬性。
註釋:返回值可以是值的組合。例如,返回 20 意味著在 p2 在 p1 內部(16),並且 p1 在 p2 之前(4)。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | 9.0 | true | true | true |
用法
node.compareDocumentPosition(node)
引數
- 必需
- node 規定於當前節點作比較的節點
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(div.compareDocumentPosition(btn));
}
</script>
</html>
10. contentEditable
設定或返回元素內容是否可編輯
提示:您也可以使用 isContentEditable 屬性來查明元素內容是否可編輯。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.contentEditable
HTMLElementObject.contentEditable=true|false
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd"></div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
div.contentEditable = true;
}
</script>
</html>
11. dir
設定或返回元素的文字方向
提示:Element需要設定dir屬性。
dir的屬性值
- auto 自動
- rtl 右
- ltl 左
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.dir=text-direction
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir=""></div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(div.dir);
}
</script>
</html>
12. firstChild
返回指定節點的首個子節點,以 Node 物件
註釋:在 HTML 中,文字本身是 HTML 元素的父節點,HEAD 和 BODY 是 HTML 元素的子節點。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.firstChild
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
if(div.firstChild.nodeType == 3){
console.log(div.childNodes[1]);
}else{
console.log(div.firstChild);
}
}
</script>
</html>
13. getAttribute()
返回指定屬性名的屬性值
提示:如果您希望以 Attr 物件返回屬性,請使用 getAttributeNode。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
element.getAttribute(attributename)
引數
- 必需
- attributename 需要獲得屬性值的屬性名稱。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(div.getAttribute('id'));
}
</script>
</html>
14. getAttributeNode()
返回指定屬性名的屬性值,以 Attr 物件
提示:如果您只需要返回屬性值,請使用 getAttribute。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
element.getAttributeNode(attributename)
引數
- 必需
- attributename 需要返回的屬性的名稱。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(div.getAttributeNode('div').nodeValue);
}
</script>
</html>
15. getElementsByTagName()
返回具有指定標籤名的元素子元素集合,以 NodeList 物件
提示:引數值 “*” 返回元素的所有子元素。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
element.getElementsByTagName(tagname)
引數
- 必需
- tagname 需要獲得的子元素的標籤名。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
<p></p>
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(document.body.getElementsByTagName('p'));
}
</script>
</html>
16. hasAttribute()
如果存在指定屬性,則 hasAttribute() 方法返回 true,否則返回 false。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | 9.0 | true | true | true |
用法
element.hasAttribute(attributename)
引數
- 必需
- attributename 需要檢查是否存在的屬性名稱。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
<p></p>
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(div.hasAttribute('div'));
}
</script>
</html>
17. hasAttributes()
如果指定節點擁有屬性,則 hasAttributes() 方法返回 true,否則返回 false
如果指定節點不是元素節點,則返回值始終是 false。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | 9.0 | true | true | true |
用法
element.hasAttributes()
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
<p></p>
<p></p>
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(div.hasAttributes());
}
</script>
</html>
18. hasChildNodes()
如果指定節點擁有子節點,返回 true,否則返回 false
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.hasChildNodes()
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
alert(div.hasChildNodes());
}
</script>
</html>
19. id
設定或返回元素的 id
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.id=id
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
div.id = "div";
}
</script>
</html>
20. innerHTML
設定或返回元素的 inner HTML
提示:可以解析字串中的HTML標籤。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
HTMLElementObject.innerHTML=text
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
var htmlText = div.innerHTML;
htmlText += "<strong>strong</strong><br/>".fontsize("18px");
htmlText += "<strong>strong</strong>";
div.innerHTML = htmlText;
}
</script>
</html>
21. insertBefore()
在您指定的Element裡已有的子節點之前插入新的子節點
提示:如果您希望建立包含文字的新列表項,請記得建立文字節點形式的文字,以便追加到 LI 元素中,然後向列表插入這個 LI。您也可以使用 insertBefore 方法插入/移動已有元素。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | true | true | true | true |
用法
node.insertBefore(newnode,existingnode)
引數
- 必需
- newnode 需要插入的節點物件。
- 可選
- existingnode 在其之前插入新節點的子節點。如果未規定,則 報錯。
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
var text = document.createTextNode("dddddddd");
div.insertBefore(text,div.childNodes[0])
}
</script>
</html>
22. isContentEditable
isContentEditable 屬性返回元素的內容是否可編輯,該屬性為只讀
提示:請使用 contentEditable 屬性來改變元素的可編輯狀態。
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
11.0 | 5.5 | 3.0 | 3.2 | 10.6 |
用法
HTMLElementObject.isContentEditable
<html>
<head>
<title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
function Event(){
var text = document.createTextNode("dddddddd");
div.insertBefore(text,div.childNodes[0])
}
</script>
</html>
23. isDefaultNamespace()
如果指定的名稱空間是預設的, 方法返回 true,否則返回 false
瀏覽器支援
IE | firefox | safari | opera | |
---|---|---|---|---|
true | 9.0 | true | true | true |
用法
node.isDefaultNamespace(namespaceURI)
引數
- 必需
- namespace 需要檢查的名稱空間的 URI。
相關推薦
JS操作DOM元素屬性和方法
Dom元素基本操作方法API,先記錄下,方便以後使用。 W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文件的API,為文件提供了結構化表示,並定義瞭如何通過指令碼來訪 問文件結構。JavaScript則是用於訪問和處理DOM的語言。
SVG DOM常用屬性和方法介紹(1)
12.2 SVG DOM常用屬性和方法介紹 將以Adobe SVG Viewer提供的屬性和方法為準,因為不同解析器對JavaScript以及相關的屬性和方法支援的程度不同,有些方法和屬性是某個解析器所特有的。SVG支援DOM2標準。 12.2.1 文件初始化相關 — ev
DOM節點的屬性和方法
HTML DOM Element 物件 HTML DOM 節點 在 HTML DOM (文件物件模型)中,每個部分都是節點: 文件本身是文件節點 所有 HTML 元素是元素節點 所有 HTML 屬性是屬性節點 HTML 元素內的文字是文字節點 註釋是
元素節點的屬性和方法
ntb div 節點 -c obj name ron func efi 元素節點的屬性 /* tagName innerHTML 雙標簽 valu
【轉】JavaScript 節點操作 以及DOMDocument屬性和方法
表示 位置 clas 句柄 doc elements nta XML sele 最近發現DOMDocument對象很重要,還有XMLHTTP也很重要 註意大小寫一定不能弄錯. 屬性: 1Attributes 存儲節點的屬性列表(只讀) 2childNodes 存儲節點的子
JavaScript day06 DOM程式設計4和BOM屬性和方法
一、HTML DOM 1.Document物件 1.1屬性 title 描述:獲取/設定標題欄資訊 語法: document.title = value 或 var 變數名稱 = document.title <!DOCTYPE html> <h
HTML DOM 物件的屬性和方法
getElementById(id) ———— 獲取帶有指定id的節點元素。 getElementByTagName(tagename)———– 獲取相應標籤元素的子元素集合,它允許吧萬用字元作為它的引數,“”*“”一般是放在引號中以區分乘號。返回值是偽陣列。 getElementByClassName(c
函數屬性和方法:length和prototype
scrip spa ont pan div blog 屬性 col 方法 ECMAScript中的函數是對象,因此函數也有屬性和方法。每個函數都包含兩個屬性:ength和prototype。 其中, length屬性表示函數希望接收的命名參數的個數 . function
jQuery事件對象的屬性和方法
行為 class down 接受 觸發 觸發事件 this 右鍵 lan jQuery事件對象的屬性和方法 事件對象的屬於與方法有很多,但是我們經常用的只有那麽幾個,這裏我主要說下作用與區別 event.type:獲取事件的類型 觸發元素的事件類型 $("a").cli
JavaScript的String對象的屬性和方法
charat() match ace 屬性 -- ast 一個 unicode rep ---恢復內容開始--- 屬性: length 字符串的長度 prototype 字符串的原型對象 constructor 字符串
scrapy.Spider的屬性和方法
ted 爬蟲 rules 類方法 使用 cto component 記錄日誌 settings scrapy.Spider的屬性和方法 屬性: name:spider的名稱,要求唯一 allowed_domains:允許的域名,限制爬蟲的範圍 start_urls:初始u
JavaScript 字符串屬性和方法
length last 字符串 slice 第一次 prototype bstr 找到 earch 字符串屬性: constructor : 返回創建字符串屬性的函數; length : 返回字符串的長度; prototype : 允許您向對象添加屬性和方法;
利用反射操作bean的屬性和方法
兩個 決定 dto epo cts 強制 多選 通過 報表 今天在開發中碰到這樣一個場景:當請求添加項目下的目錄時,傳過來的是一個IndexModel,這個Model裏有關於這個目錄字段的詳細信息,包括基礎報表,實時,漏鬥等信息(這些字段類型都是boolean),對應於頁面
form表單的應用:form對象自帶屬性和方法及提交時提交的數據.....
uil nsf fileread tex class dataurl asd who accept 1.html中含有form表單 (1)html <form id="picLoad" class="lt" style="width: 230px;" enctype=
JS遍歷屬性和方法
asc == itl 方法 archive items += ron arch 引用原文:http://www.cnblogs.com/lishenglyx/archive/2008/12/08/1350573.html#undefined <script l
Android零基礎入門第22節:ImageView的屬性和方法大全
子類 parent ide eight odin 使用詳解 統架構 討論 架構 通過前面幾期的學習,TextView控件及其子控件基本學習完成,可以在Android屏幕上顯示一些文字或者按鈕,那麽從本期開始來學習如何在進行圖片展示,這就是涉及到另外一個非常重要的控件家族,那
[轉]Ext.grid常用屬性和方法
生效 沒有 not find nco ctr type sco asc 原文地址:http://blog.csdn.net/fm19901229/article/details/8113969 1、Ext.grid.GridPanel 主要配置項: store:表格的數
設置dom節點屬性的代碼優化
stop 相對 方案 關註 cnblogs 很多 top switch 優化 需求:某dom節點在正常情況下,有設置其transition-duration為1s,在mousemove時候,要去掉其transition-duration設置的時間,在mouseup時候,恢復
Vue屬性和方法
vue屬性和方法<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性和方法</title> </head&g
淺析JavaScript訪問對象屬性和方法及區別
cti on() 對象方法 編寫程序 因此 brush new 函數 name 屬性是一個變量,用來表示一個對象的特征,如顏色、大小、重量等;方法是一個函數,用來表示對象的操作,如奔跑、呼吸、跳躍等。 在JavaScript中通常使用”."運算符來存取對象的屬性的值。或者使