JavaScript DOM对象及document练习element对象

你的名字 2022-06-03 10:54 249阅读 0赞

**DOM(文档对象模型)对象**

**Document对象**

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
<input type="text" id="nameId" value="zhangsan"/><br>  
<input type="text" name="username" value="zhaosi"/><br>  
<input type="text" name="username" value="wangwu"/><br>  
<input type="text" name="username" value="ermazi"/><br>  
  
<ul>  
 <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  
</ul>  
</body>  
<script type="text/javascript">  
/\*\*\*\*\*\*  
getElementById("id的值");通过元素的id的属性获取元素(标签)对象  
getElementsByName("name属性值");通过名称获取元素对象的集合(返回数组)  
getElementsByTagName("标签名称");通过标签名称获取元素对象的集合  
  
write("文本的内容(html的标签)")把文本内容写到浏览器上  
  
createElement("元素名称");创建元素对象  
createTextNode("文本内容");创建文本对象  
appendChild("子节点");添加子节点  
\*/  
var input = window.document.getElementById("nameId");  
//alert(input.value);  
var inputs = document.getElementsByName("username");  
//alert(inputs.length);  
for(var i = 0;i < inputs.length;i++)\{  
var input1 = inputs\[i\];  
//alert(input1.value);  
\}  
var input2 = document.getElementsByTagName("input");  
//alert(input2.length);  
for(var i = 0;i < input2.length;i++)\{  
var input1 = inputs\[i\];  
//alert(input1.value);  
\}  
</script>  
</html>

**Document练习**

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
<ul>  
<li>北京</li>  
<li>上海</li>  
<li>广州</li>  
</ul>  
</body>  
<script type="text/javascript">  
/\*  
需求：在ul无序列表下，添加一个子节点。<li>深圳</li>  
\*/  
//创建元素对象  
var li = document.createElement("li");  
//创建文本对象  
var text = document.createTextNode("深圳");  
//把文本对象添加到元素对象下面，作为子节点  
li.appendChild(text);  
//获取ul  
var ul = document.getElementsByTagName("ul")\[0\];  
//把元素对象添加到ul的下面，作为子节点  
ul.appendChild(li);  
</script>  
</html>

**Element对象**

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
<input type="text" id="nameId" value="zhangsan" />  
<ul id="ulId">  
<li>北京</li>  
<li>上海</li>  
<li>广州</li>  
</ul>  
</body>  
<script type="text/javascript">  
/\*  
获取元素对象  
getAttribute("属性名称");获取属性的值  
setAttribute("属性名称","属性的值")设置或修改属性的值  
removeAttribute("属性名称");删除属性  
  
document.getElementsByTagName("")文件调用，返回元素对象的集合  
Element.getElementsByTagName("")元素调用，返回元素下的所有子节点  
  
获取元素下的所有子节点\*\*\*\*\*  
ul.getElementsByTagName()  
  
\*/  
var input = document.getElementById("nameId");   
//alert(input.value);//value是一个属性，不是一个方法，直接调用  
alert(input.getAttribute("value"));  
//修改  
//input.setAttribute("value", "zhaosi");  
//alert(input.getAttribute("value"));  
  
input.removeAttribute("value");  
//alert(input.getAttribute("value"));  
//====================================================  
var ul = document.getElementById("ulId");  
//var lis = ul.childNodes;  
//alert(lis.length);//7  
  
var lis2 = ul.getElementsByTagName("li");  
alert(lis2.length);  
  
</script>  
</html>