javascript之dom基礎

時間 2019-11-26

原文原文鏈接

如下測試代碼，假設存在html代碼爲javascript

<html>
<head>
<script type="text/javascript" src="Demo2.js">
</script>
</head>
<body>
<div id="box",style="color:red",title="標題",>測試DIV</div>
<lu>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</lu>
<input name="add" value="in",checked="true"/>
</body>
</html>

一、getElementById();html

 alert(document.getElementById("box").tagName);//返回：DIV
 alert(document.getElementById("box").innerHTML);//返回：測試DIV
 document.getElementById("box").id;  //獲取id
 document.getElementById("box").id="test"; //給id賦值
 document.getElementById("test").style;
 alert(document.getElementById("test").style);
 document.getElementById("test").style.color;
 document.getElementById("test").style.color='green';//改顏色爲綠色
 document.getElementById("test").innerHTML="222222";//把內容改爲222222

二、getElementsByTagName();java

document.getElementsByTagName("*");//獲取全部的節點
var arr = document.getElementsByTagName("li");//獲取全部li節點
 alert(arr[0].innerHTML);//打印第一個li裏面的內容
 alert(arr.item(1).innerHTML);//打印第二個li裏面的內容
 alert(arr.length);////打印數字的個數

三、getElementsByName();node

 var arr = document.getElementsByName("add");

 alert(document.getElementsByName("add")[0].value);

 document.getElementsByName("add")[0].value="111";

四、getAttribute();setAttribute();removeAttribute()app

 alert(document.getElementById("box").getAttribute("id"));

 alert(document.getElementById("box").setAttribute("id","test"));

 alert(document.getElementById("box").getAttribute("test"));
document.getElementById("box").removeAttribute("style");

2、測試

var box=document.getElementById("box");

alert(box.childNodes.length);

alert(box.childNodes[0].nodeValue);

alert(box.childNodes[1].nodeValue);

alert(box.childNodes[2].nodeValue);

for(var i = 0;i<box.childNodes.length;i++){

 if(box.childNodes[i].nodeType===1){

  alert(box.childNodes[i].nodeName);

 }else if(box.childNodes[i].nodeType===3){

  alert(box.childNodes[i].nodeValue);

 }

2.一、忽略空格的幾種方法spa

方法1、code

var box=document.getElementById("box");

for(var i = 0;i<box.childNodes.length;i++){

 if(box.childNodes[i].nodeType===3 && /^\s+$/.test((box.childNodes[i].nodeValue)){

  box.childNodes[i].parentNode.removeChild[box.childNodes];

 }

 var box=document.getElementById("box");

for(var i = 0;i<box.childNodes.length;i++){

 var ret[];

 if(box.childNodes[i].nodeType===3 && /^\s+$/.test((box.childNodes[i].nodeValue)){

  continue;

 }

 ret.push(box.childNodes[i]);

3、節點操做htm

var box = document.getElementById("box");

var p = document.createElement("p");

var span = document.createElement("span");

box.appendChild(p);

var tmp = document.createTextNode("duanlo");

p.appendChild(tmp);

box.parentNode.insertBefore(span.box);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。