當(dāng)前位置：
首頁(yè) >
JS-DOM Element方法和属性
發(fā)布時(shí)間：2025/6/17
51
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS-DOM Element方法和属性
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
JS-DOM Element方法和屬性
S-DOM?Element方法和屬性一,獲取html元素
1.getElementByID(id)
通過(guò)對(duì)元素的ID訪問(wèn),這是DOM一個(gè)基礎(chǔ)的訪問(wèn)頁(yè)面元素的方法.
example:
<div id="divid">測(cè)試</div>
<script language="javascript">
var div=document.getElementByID("divid");
alert (div.nodeName); //顯示元素名
</script>
如果id在元素中不是唯一的,那么獲得的將是第一個(gè)ID.
2.getElementsByName(name)
僅用于input radio checkbox等元素,返回名字為name的元素?cái)?shù)組
example:
<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=document.getElementsByName("george");
alert (georges.length);??//獲取georges個(gè)數(shù),對(duì)div唔效果
</script>
3.getElementsByTagName(tagname)
返回具有tagname的元素列表數(shù)組.處理大的DOM結(jié)構(gòu)會(huì)用到它
二,DOM?Element常用方法
1.appendChild(node)?? //增加內(nèi)容
向當(dāng)前對(duì)象追加節(jié)點(diǎn),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>
當(dāng)然,上面的功能用document.getElementById("test").innerHTML="測(cè)試一下"就可實(shí)現(xiàn),遺憾的是,innerHTML不屬于DOM.
2,removeChild(childreference)
移除當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn),并返回節(jié)點(diǎn)
<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)
復(fù)制并返回當(dāng)前的復(fù)制節(jié)點(diǎn),由于復(fù)制了原節(jié)點(diǎn)的id屬性,所以在document樹(shù)中要改ID屬性,以確保ID唯一性.
4,insertBefore(newElment,targetElement)??插入新的節(jié)點(diǎn)
在當(dāng)前節(jié)點(diǎn)插入一個(gè)新節(jié)點(diǎn),如果targetElement為null,那新節(jié)點(diǎn)為最后節(jié)點(diǎn).
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="魚(yú)與";
</script>
三,DOM?Element常用屬性
1、childeNodes??返回所有子節(jié)點(diǎn)對(duì)象,
例如
<ul id="mylist">
<li>美國(guó)</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
這是一個(gè)標(biāo)準(zhǔn),但它并不書(shū)DOM
例如:
<div id="bbb"><span id="aaa">我拉</span></div>
<input type=button??value="點(diǎn)擊看看">
<script language="javascript">
function change()
{
document.getElementById("aaa").innerHTML= "修改修改";
}
</script>
3,style
這是一個(gè)極其重要的屬性,可以獲取并修改每個(gè)單獨(dú)的樣式.
例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild????返回第一個(gè)子節(jié)點(diǎn)
lastChild???? 返回最后一個(gè)子節(jié)點(diǎn)
parentNode?? 返回父節(jié)點(diǎn)的對(duì)象。
nextSibling?? 返回下一個(gè)兄弟節(jié)點(diǎn)的對(duì)象
previousSibling 返回前一個(gè)兄弟節(jié)點(diǎn)的對(duì)象
nodeName 返回節(jié)點(diǎn)的HTML標(biāo)記名稱(chēng)，使用英文的大寫(xiě)字母，如P, FONT
5,click()?
執(zhí)行元素的一次點(diǎn)擊，可以用于通過(guò)腳本來(lái)觸發(fā)onClick函數(shù)
轉(zhuǎn)載于:https://www.cnblogs.com/muyan927/p/5272835.html
總結(jié)
以上是生活随笔為你收集整理的JS-DOM Element方法和属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 算法题26 复杂链表的复制
- 下一篇： JavaScript（循环）