节点
节点种类：元素节点（标签）文本节点（内容）属性节点（如a标签）等十二种
节点关系：兄弟节点 父子关系 父节点 子节点
节点对象：属性和方法
节点对象的属性
childNodes 获取所有子节点（元素文本节点）
<body>
<div id="box">
<div>哈哈</div>
<div>呵呵<div/>
</div>
</body>
<script>
var box=document.getElementById('box');
console.log(box.childNodes)//输出4
</script>
firstChild 第一个子节点
<body>
<div id="box">￥
￥<div>哈哈</div>
<div>呵呵<div/>
</div>
</body>
<script>
var box=document.getElementById('box');
console.log(box.firstChild)//输出#text（第一个文本节点￥-->￥之间）
</script>
lastChild最后一个子节点 （道理同上）
parentNode通过当前子节点找父节点
<body>
<div>
<div id="box">哈哈</div>
<div>呵呵<div/>
</div>
</body>
<script>
var box=document.getElementById('box');
console.log(box.parentNode)//输出<div>
<div id="box">哈哈</div>
<div>呵呵<div/>
</div>
</script>
nextSibing通过当前找下一个子节点
<body>
<div>
<div id="box">哈哈</div>
<div>呵呵<div/>
</div>
</body>
<script>
var box=document.getElementById('box');
console.log(box.nextSibing)//输出<div>呵呵<div/>
</script>
previousSbling通过当前找上一个子节点
<body>
<div>
<div>哈哈</div>
<div id="box">呵呵<div/>
</div>
</body>
<script>
var box=document.getElementById('box');
console.log(box.previousSbling)//输出<div>哈哈</div>
</script>
document 文档 对象
属性：
body body元素对象
title title标题
URL 网页地址
links 获取超链接结果如：links[1]结果是HTMLCollection集合 索引 从0开始 length
images 找图片
forms 找的表单而不是内容
images ： 例如：
document.images[1].src='images/1.jpg';
节点操作：增删改查
增
write
createElement 创建节点
appendChild 追加孩子（追加子节点）
例如：
var op=document.creteElement('p');//创建节点
op.innerHTML='哈哈';//节点显示的内容
var o=document.getElementById('box');//获取追加节点对象
o.appendChild(op);//追加节点
若：op创建的是超链接则需要在追加节点时添加href
op.href='#';
删
removeChild(); //需要先找到父节点，再删除子节点
复制节点
cloneNode(true/false);克隆 默认只复制节点本身
flag 布尔类型 true 复制包含子节点
false 不包含子节点 默认false
DOM节点操作（节点自身）
createElement 创建元素节点
vartbody=document.createElement('tbody');
createTextNode 创建文本节点
var o=document.createTextNode('你好');
appendChild 追加孩子
document.body.appendChild(o);
**insertBefore（newNode，oldNode）**在指定节点前插入孩子
document.body.insertBefore(o,box);
cloneNode 复制节点
removeChild 删除节点
tbody.removeChild(i);
replaceChild 替换节点
document.body.replaceChild(o,box);
节点属性
HTML DOM
src src
href href
title tiele
alt alt
action action
for htmlFor //特殊记忆
class className //特殊记忆
1.节点属性值设置
节点对象.属性值=值
<img src="images/1.jpg" alt="" id="pic">
<a href="#" id="oa">百度</a>
<label id="la">用户名</label><input type="text" id="in">
<label id="la1">密码</label><input type="passworld" id="pw">
<script>
var pic=document.getElementById('pic');
pic.src='images/2.jpg';
var oa=document.getElementById('oa');
oa.href='http:www.baidu.com';
var la=document.getElementById('la');
la.htmlFor='in';
var la1=document.getElementById('la1');
la1.htmlFor='pw';
</script>
2.节点属性值的获取
节点对象.属性名
checkbox 复选框 checked 勾中。属性：true（勾中）false（未勾中）
爱好：<input type="checkbox" id="in1">玩游戏<input type="checkbox" checked id="in2">看书<input type="checkbox" id="in3">哇<br/>
<script>
var in1=document.getElementById('in1');
var in2=document.getElementById('in2');
in1.checked=true;
in2.checked=false;
</script>
radio 单选框 同上
性别：<input type="radio">男<input type="radio" id="inp">女
<script>
var inp=document.getElementById('inp');
inp.checked=true;
</script>
select 下拉菜单 option
selected 默认选择
onchange 内容改变
<select name="" id="slt">
<option value="images/1.jpg" selected>images/1.jpg</option>
<option value="images/2.jpg">images/2.jpg</option>
<option value="images/3.jpg">images/3.jpg</option>
</select>
<img src="images/1.jpg" alt="" id="pic">
<script type="text/javascript">
var o=document.getElementById('slt');
var img=document.getElementById('pic');
// img.src=o.value;
//内容改变
o.onchange=function () {
img.src=o.value;
};
</script>
1451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
