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);