DOM:document objert model 文档对象模型
BOM:browser object model 浏览器对象模型
节点:
节点种类:元素节点(标签) 文本节点(内容) 属性节点 等十二种
节点关系:兄弟节点 父子关系 父节点 子节点 兄弟节点
节点对象:属性和方法
innerHTML 开始标记和结束标记之间的内容
document 文档对象
body
节点对象的属性:
childNodes 获取所有的子节点(元素节点、文本节点) NodeList 索引 0 length 节点个数
firstChild
lastChild
parentNode 父节点
previousSibling 上一个兄弟节点
nextSibling 下一个兄弟节点
案例
<body>
<div id="box">
<div>你好</div>
<div>我好</div>
</div>
<div id="content">
<p>AAAA</p>
<p>AAAA</p>
<p>AAAA</p>最后
</div>
<ul id="banner"><li>AAA</li><li>AAA</li><li>AAA</li></ul>
</body>
<script type="text/javascript">
// console.log(document.body);//body元素节点
// var bd=document.body;//body
var o=document.getElementById('box');
var cs=o.childNodes;//子节点
// console.log(cs[1]);
cs[1].innerHTML='hello world';//修改内容
cs[3].innerHTML='哈哈哈';
console.log(o.firstChild);//第一个孩子
console.log(cs.length);
var o1=document.getElementById('content');
var os=o1.childNodes;//
os[3].innerHTML='BBBB';
console.log(os);
console.log(os.length);//子节点个数
os[os.length-2].innerHTML='CCCC';
os[3].style.color='red';
console.log(o1.lastChild);//最后一个孩子
var oUl=document.getElementById('banner');
var os1=oUl.childNodes;
console.log(os1);
os1[2].innerHTML='CCCC';
oUl.lastChild.innerHTML='DDDD';//连缀
oUl.firstChild.innerHTML='aaa';
var pN=oUl.lastChild.parentNode;//父节点
console.log(pN);//
</script>
document 文档对象
属性:
body body元素对象
title 标题
URL 网页地址
links 超链接 HTMLCollection 集合 索引 0 length
images 图片
forms
方法:
write
writeln
getElementById 根据ID查找节点对象
返回值: 节点对象,null
案例
<body>
<div id="box">
<div>AAA</div>
<div>BBB</div>
<a href="#">太</a>
<a href="#">光</a>
<a href="#">顿</a>
<div>CCC</div>
</div>
<div>
<img src="img/a1.jpg" alt="">
<img src="img/a1.png" alt="">
<img src="img/a1.gif" alt="">
</div>
</body>
<script type="text/javascript">
var o=document.getElementById('box');//获取元素
var os=o.childNodes;
console.log(os); //子节点
console.log(os[1]);
os[1].innerHTML='大河之剑天上来';
o.lastChild.previousSibling.innerHTML='QQQ'; //改变子子节点
document.links[2].innerHTML='巨';
document.title='document呀';
document.images[0].src='img/a1.gif'; 改变图片内容
document.write(document.links.length);
</script>
节点操作: 增删改查
增:
write
document.createElement 创建节点
obj.appendChild 追加子节点
删除节点:
obj.removeChild
复制节点:
cloneNode(flag)
flag 布尔类型 true 复制包含子节点 false 不包含子节点 默认为false
案例
<script type="text/javascript">
var op=document.createElement('p');//创建节点对象
op.innerHTML='哈哈哈';//为节点对象添加内容
console.log(op);
// document.body.appendChild(op);//将节点对象添加到body中
var o=document.getElementById('box');
o.appendChild(op);//将节点对象添加到div中
</script>
小案例
<div id="box">
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
</div> -->
var o=document.getElementById('box');
var o2= o.childNodes[1];
o.removeChild(o2); //复制节点
var p=document.createElement('p');
p.innerHTML='你好';
o.insertBefore(p,o2);
o.replaceChild(p,o2);
var a1=o2.cloneNode(true);
o2.appendChild(a1); //插入节点
爱好:
<input type="checkbox">游戏
<input type="checkbox" id="a1">唱歌
<input type="checkbox">跳舞
<br>
职业:
<input type="radio"name="sex">歌手
<input type="radio"name="sex">舞者
<input type="radio"name="sex" id="b1">流浪
var a=document.getElementById('a1');
a.checked=true;
var b=document.getElementById('b1');
b.checked=true;