JS-DOM Element方法和屬性
一,獲取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函數
JS設置DIV的屬性
setAttribute方法:
var a=document.createElement("div"); //新建一個DIV
a.id="div1";
//給新加的DIV命名
a.style.setAttribute("zIndex",2);
//設置DIV疊放次序
a.style.setAttribute("textAlign",Dalign);
//對齊方式
a.style.setAttribute("border","#e6e7e8 1px solid");
//邊框顏色
a.style.width=divwidth; //DIV寬度
a.style.height=Dheight;
//DIV高度
a.setAttribute("position","absolute");
a.style.backgroundColor=Dbgcolor;
//DIV背景
a.setAttribute("z-index","2"); //DIV疊放次序
a.style.top =
divtop+"px"; //DIV上邊距
a.style.left = divleft+"px";
//DIV左邊距
a.setAttribute("innerHTML",info10[0].firstChild.data+"<br>"+info11[0].firstChild.data);
document.body.appendChild(a); //新建DIV結束
隱藏div：document.getElementById（“啊”）.style.display="none" //block 出現
document.getElementById（“啊”）.style.disabled="true"
document.getElementById（“啊”）.style.readOnly="true"
js獲取節點 dom操作
| 接口 |
nodeType常量 |
nodeType值 |
備注 |
| Element |
Node.ELEMENT_NODE |
1 |
元素節點 |
| Text |
Node.TEXT_NODE |
3 |
文本節點 |
| Document |
Node.DOCUMENT_NODE |
9 |
document |
| Comment |
Node.COMMENT_NODE |
8 |
注釋的文本 |
| DocumentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
document片斷 |
| Attr |
Node.ATTRIBUTE_NODE |
2 |
節點屬性 |
| 方法 |
描述 |
| createAttribute() |
用指定的名字創建新的Attr節點。 |
| createComment() |
用指定的字符串創建新的Comment節點。 |
| createElement() |
用指定的標記名創建新的Element節點。 |
| createTextNode() |
用指定的文本創建新的TextNode節點。 |
| getElementById() |
返回文檔中具有指定id屬性的Element節點。 |
| getElementsByTagName() |
返回文檔中具有指定標記名的所有Element節點。 |
| 屬性 |
描述 |
| attributes |
如果該節點是一個Element，則以NamedNodeMap形式返回該元素的屬性。 |
| childNodes |
以Node[]的形式存放當前節點的子節點。如果沒有子節點，則返回空數組。 |
| firstChild |
以Node的形式返回當前節點的第一個子節點。如果沒有子節點，則為null。 |
| lastChild |
以Node的形式返回當前節點的最后一個子節點。如果沒有子節點，則為null。 |
| nextSibling |
以Node的形式返回當前節點的兄弟下一個節點。如果沒有這樣的節點，則返回null。下一個兄弟節點 |
| nodeName |
節點的名字，Element節點則代表Element的標記名稱。 |
| nodeType |
代表節點的類型。 |
| parentNode |
以Node的形式返回當前節點的父節點。如果沒有父節點，則為null。 |
| previousSibling |
以Node的形式返回緊挨當前節點、位於它之前的兄弟節點。如果沒有這樣的節點，則返回null。上一個兄弟節點 |
| 方法 |
描述 |
| appendChild() |
通過把一個節點增加到當前節點的childNodes[]組，給文檔樹增加節點。 |
| cloneNode() |
復制當前節點，或者復制當前節點以及它的所有子孫節點。 |
| hasChildNodes() |
如果當前節點擁有子節點，則將返回true。 |
| insertBefore() |
給文檔樹插入一個節點，位置在當前節點的指定子節點之前。如果該節點已經存在，則刪除之再插入到它的位置。 |
| removeChild() |
從文檔樹中刪除並返回指定的子節點。 |
| replaceChild() |
從文檔樹中刪除並返回指定的子節點，用另一個節點替換它。 |