<!--
dom(document object mode)树
document
|
html
|
head body
| h1 a
title | |
文本 文本
<body>
<h1>天帝</h1>
<a href="#">哈哈</a>
</body>
body是html的子节点，h1是body的子节点
天帝是h1的子节点，因为天帝是h1的结构体内的
a是body的子节点，哈哈是a的子节点，因为哈哈是a的结构体内的
href是 a的附属节点
dom操作
通过js对内存中的dom树上的节点进行增删改查的操作，间接操作就是html文旦
document.getElementById("ID名") 根据这个ID获取节点对象
document.getElementsByTagName("标签名") 根据标签名获取多个节点对象，返回一个数组
document.getElementsByName("name") 根据name获取多个节点对象，返回一个数组
hasChildNodes() 是否有子节点
父节点.removeChild(子节点) 移除子节点
父节点.replaceChild(我的节点,目标节点) 替换(剪贴) 父节点是 目标节点 的父节点
document.createElement("标签") 创建一个元素
appendChild(子节点) 子节点是由我们自己创建的元素,把这个元素加入到节点当中
insertBefore(我的节点,目标节点) 插入目标节点前面
注意：
1 document也是一个对象，不过是整个文档的对象
2 getElementsByTagName想要获取一块地方的标签名的节点对象，就必须在这块地方的父标签处写上ID，先获取标签父对象
再用 父对象.getElementsByTagName
3 获取下拉框select默认选中对象selected，可以先用getElementsByTagName获取全部节点对象，然后再遍历
然后再if(options[i].selected){} selected是返回true和false，如果遍历到了选中了，就会返回true，就可以进行操作了
4 this表示的是触发此事件的对象
5 "自杀方法": 子节点.ParentElement.removeChild(子节点)，ParentElement是父节点
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>荒天帝</title>
<script>
function addText()
{
//获取父节点id
var div1=document.getElementById("div1")
//创建元素节点
var p1=document.createElement("p")
//创建文本节点
var text=document.createTextNode("荒天帝")
//把文本节点添加到p节点里
p1.appendChild(text)
//再把p节点添加到div1里
div1.appendChild(p1)
}
</script>
</head>
<body >
<input type="button" value="添加文本" onclick="addText()"/>
<div id="div1">
</div>
</body>
</html>
dom案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>荒天帝</title>
<script>
//省市联动
var arr=[
["南昌","贵溪"],
["丽水","台山"]
];
function changeCity()
{
var prov=document.getElementById("prov")
var mycity=document.getElementById("city")
//mycity.innerHTML="<option>请选择市</option>" //重新初始化子节点
mycity.options.length=0 //直接把options的length置0,也可以达到清空的目的,看清楚是options而不是option
var value=prov.value //这个value就是我们指定的0,1,2
var cities=arr[value]
for(var i=0;i<cities.length;i++)
{
var cityText=cities[i]
//创建option节点
var option1=document.createElement("option")
var textNode=document.createTextNode(cityText)
option1.appendChild(textNode)
mycity.appendChild(option1)
}
}
</script>
</head>
<body >
<!--失去焦点,弹出编辑框内的内容-->
<!-- <input type="text" value="" /><br>
<input type="text" value=""/><br>
<input type="text" value=""/>-->
<!--省市联动-->
<select onchange="changeCity()" id="prov"> <!-- select的value等于option的value，因为这样符合提交表单的需求-->
<option value="">请选择省</option>
<option value="0">江西</option>
<option value="1">浙江</option>
</select>
<select id="city">
<option >请选择市</option>
</select>
</body>
<script>
<!--失去焦点,弹出编辑框内的内容-->
//给每个input绑定事件
// var inputs=document.getElementsByTagName("input");
// for(var i=0;i<inputs.length;i++) //有3个文本框
// {
// inputs[i].onchange=function()
// {
// // alert(inputs[i].value); 注意这里是不行的
// // 代码从上到下执行到这里，因为有3个文本框，所以是循环3次，下标是2(0,1,2)，当循环完3次后，i++，i此时是3
// // 再判断是否i<3，很明显i是3不小于3，所以不再执行循环。而你修改内容后触发事件的时候，没有弹框出来，为什么？
// // 那是因为此时 下标是3,超出下标了，如果是java会报异常，但是js不会。所以肯定不能这样写inputs[i]
// // 但是如果写inputs[i-1]呢，很明显会弹框，但是弹的框是第3个框，因为此时下标是2，而且永远都是弹第3个。
// // 所以要写this.value ，this表示的是触发此事件的对象。如果你修改第一个框，那么就是触发了下标为0时绑定的对象
// // 那么就会弹出第一个框的内容
//
// alert(this.value);
// }
// }
</script>
</html>