javascript11-DOM基础

//DOM基础:操作文档，BOM操作浏览器
/*
节点分为3类
1.元素节点：

2.文本节点:  标签内的文本
3.属性节点:  id="box"


*/
/*
1.查找元素
getElementById(),


//var box=document.getElementById('box');
//alert(box);//打印null的原因：必须要等待html全部加在内存才能获取到
//解决方法把html中加在的位置向后移动
//第二种方式：onload事件加在html
window.onload=function(){
var box=document.getElementById('box');
alert(box);
}//onload等待html加载完毕在执行script代码




window.onload=function(){
var box=document.getElementById('box');
alert(box.tagName);//读取这个元素节点的标签名
alert(box.innerHTML);//获取元素标签里的纯文本
}




window.onload=function(){
var box=document.getElementById('box');
//alert(box.id);//获取属性id的值
//alert(box.title);
//alert(box.style.color);
alert(box.className);
}




window.onload=function(){
var box=document.getElementById('box');
box.innerHTML="玩玩了";
}




window.onload=function(){
var li = document.getElementsByTagName('li');//参数传递标签名
//alert(li.length);//返回数组集合
//alert(li[0]);//返回对象
alert(li[0].tagName);
alert(li[0].innerHTML);
}




window.onload=function(){
var box = document.getElementById('box');//参数传递标签名
//处理兼容性问题
if(box.getAttribute("className")==null){
alert(box.getAttribute('class'));
}else{
alert(box.getAttribute("className"));
}
}


window.onload=function(){
var box01=document.getElementById('box01');
//box01.setAttribute('title','测试标题');
//box01.setAttribute('align','center');
//box01.setAttribute('style','color:green');
//box01.removeAttribute('style');
}
*/