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>