一,擷取html元素
1.getElementByID(id)
通過對元素的ID訪問,這是DOM一個基礎的訪問頁面元素的方法.
example:
<div id="divid">測試</div>
<script language="javascript">
var div=document.getElementByID("divid");
alert (div.nodeName); //顯示元素名
</script>
如果id在元素中不是唯一的,那麼獲得的將是第一個ID.
2.getElementsByName(name)
僅用於input radio checkbox等元素,返回名字為name的元素數組
example:
<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=document.getElementsByName("george");
alert (georges.length); //擷取georges個數,對div唔效果
</script>
3.getElementsByTagName(tagname)
返回具有tagname的元素列表數組.處理大的DOM結構會用到它
二,DOM Element常用方法
1.appendChild(node) //增加內容
向當前對象追加節點,example:
<div id="test">123</div>
<script type="text/javascript">
var newdiv=document.createElement("div");
var newtext=document.createTextNode("A new div");
newdiv.appendChild(newtext) ;
document.getElementById("test").appendChild(newdiv) ;
</script>
當然,上面的功能用document.getElementById("test").innerHTML="測試一下"就可實現,遺憾的是,innerHTML不屬於DOM.
2,removeChild(childreference)
移除當前節點的子節點,並返回節點
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=document.getElementById("child");
var removednode=document.getElementById("father").removeChild(childnode)
</script>
3.cloneNode(deepBoolean)
複製並返回當前的複製節點,由於複製了原節點的id屬性,所以在document樹中要改ID屬性,以確保ID唯一性.
4,insertBefore(newElment,targetElement) 插入新的節點
在當前節點插入一個新節點,如果targetElement為null,那新節點為最後節點.
example:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=document.getElementById("lovespan"); //擷取id
var newspan=document.createElement("span");
var newspanref=document.body.insertBefore(newspan, lovespan);
newspanref.innerHTML="魚與";
</script>
三,DOM Element常用屬性
1、childeNodes 返回所有子節點對象,
例如
<ul id="mylist">
<li>美國</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var msg="" ;
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
var li=mylist.childNodes[i];
msg+=li.innerText;
}
alert (msg);
</script>
2,innerHTML
這是一個標準,但它並不書DOM
例如:
<div id="bbb"><span id="aaa">我拉</span></div>
<input type=button value="點擊看看">
<script language="javascript">
function change()
{
document.getElementById("aaa").innerHTML= "修改修改";
}
</script>
3,style
這是一個極其重要的屬性,可以擷取並修改每個單獨的樣式.
例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild 返回第一個子節點
lastChild 返回最後一個子節點
parentNode 返回父節點的對象。
nextSibling 返回下一個兄弟節點的對象
previousSibling 返回前一個兄弟節點的對象
nodeName 返回節點的HTML標記名稱，使用英文的大寫字母，如P, FONT
5,click()
執行元素的一次點擊，可以用於通過指令碼來觸發onClick函數
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
