BOM和DOM
BOM
bom即浏览器对象模型， BOM提供了独立于内容 而与浏览器窗口进行交互的对象。 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window，也就是说，BOM中的绝大多数方法都要先获得window对象。
对于它的话我准备写写方法就好了：
window.prompt（“请输入”） 在浏览器弹出一个输入框，接收到的是输入的文本。
window.open（“http://www.baidu.com”） 打开一个网站
window.close(); IE支持关闭 ,其他浏览器不支持
定时器
var id=window.setTimeout(function(){ },5000); 调用一次性的定时器,返回值是这个定时的id，后面是定的毫秒时间
window.clearTimeout(id); 取消一次性定时器
var timeID=window.setInterval(function(){ },1000); 重复调用的定时器
window.clearInterval(timeID) 取消定时器
var v=location.href; 可以获取或设置地址栏里面的内容,可以用来跳转页面，跳转可以使用下面的指令。window.location.href=“http://www.163.com”;
ele.innerHTML innerHTML可以获取或指定元素标签内的html内容，从·该标签的起始位置到终止位置的全部内容。
在上面方法中，与弹框相关的方法 window对象可以省略不写
DOM
//DOM组成部分:
Element 标签对象
Attribute 属性对象
Comment 注释对象
Text 文本对象
document 整个的HTML文档对象
Node:节点对象
DOM树 父节点子节点所构成了一个DOM树
window.document 通过window中 document的这个属性,可以获取出文档对象
document.body 可以获得body标签对象
获取Element对象
* getElementById():通过id属性值获取唯一的元素
* getElementsByTagName():通过标签名称获取元素对象数组
* getElementsByName():通过name属性值获取元素对象数组
* getElementsByClassName():通过class属性值获取元素对象数组
通过上面4种标签名获取多个元素对象的数组，然后遍历就可以取出每个元素，然后就可以为所欲为了。
其中，
表单标签：
针对表单标签,提供了一个方法根据表单标签的name属性值,来获取多个表单元素
<input type=" " id="" value="as" name="username" />
var arr = document.getElementsByName("username");
Element对象的常用属性
var myDiv=document.getElementById("mydiv");
** var a=myDiv.innerHTML** 获取标签之间的子标签和文本
var b=myDiv.innerText 只获取标签之间夹的文本,不拿子标签
给标签对象设置style属性，格式为myDiv.style.color=“red”;
css样式名里面有 “-” 横杠拼接的,注意把 “-” 去掉 然后把"-"横杠后面的第一个字母大写，如myDiv.style.cssText+=“font-family:‘黑体’;background-color:yellow”;
标签对象自带属性的设置
通过对标签对象得自带属性得设置，可对标签得某个属性进行设置
<font size="" color="">龙卷风摧毁停车场·</font>
var fontEle = document.getElementsByTagName("font")[0];
方法一
fontEle.getAttributeNode("size").value="7";
fontEle.getAttributeNode("color").value="red"
方法二（省略写法）
fontEle.size = "7";
fontEle.color = "yellow";
这里要注意的是在得到fontEle时后面必须带上角标，不然得到的是一个数组。即使现在仅有一个font标签。
创建标签对象的方法
<script type="text/javascript">
var bd=document.body;
var mycom=document.createComment("这是一行注释");
//创建属性对象
var attri=document.createAttribute("style");
attri.value="color:red;background:yellow";
//怎么创建DOM对象
//创建标签对象
var myH1=document.createElement("h1");
//myH1.setAttributeNode(attri); //设置属性对象 两种设置属性的方法
//给标签设置属性以及属性的值
myH1.setAttribute("style",'color:red;background:yellow;font-size:100px');
//创建文本对象
var myText=document.createTextNode("这是一行文本内容");
//把文本对象,放到标签之间
myH1.appendChild(myText);
//把<h1>标签对象,放到body里面
bd.appendChild(myH1);
bd.appendChild(mycom);
</script>
创建标签调用各自的方法，然后设置属性，最后再添加到body中。
删除DOM中的元素
<script type="text/javascript">
var bd=document.body;
var myH1=document.createElement("h1");
var myText=document.createTextNode("一行文本");
bd.appendChild(myH1);
myH1.appendChild(myText);
删除有两种方式
bd.removeChild(myH1); 通过父元素删除子元素
myH1.removeChild(myText);
myH1.remove(); 元素自己删自己
动态创建DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var mydiv=document.createElement("div");
mydiv.setAttribute('style','border:1px black solid;height:200px;')
document.body.appendChild(mydiv);
var i=-230;
var timeID=setInterval(function(){
i++;
if(i>screen.height-500){
clearInterval(timeID);
setTimeout(function() {
mydiv.style.display="none";
}, 2000);
}else{
mydiv.style.marginTop=i+"px";
}
},1);
</script>
</html>
上一篇： JavaASE算法实现