BOM和DOM

最新推荐文章于 2025-06-02 00:45:00 发布

原创最新推荐文章于 2025-06-02 00:45:00 发布 · 309 阅读

CC 4.0 BY-SA版权

博客介绍了BOM（浏览器对象模型），其核心对象是window，还列举了相关方法。同时介绍了定时器的使用，包括一次性和重复调用的定时器及取消方法。重点阐述了DOM（文档对象模型），如获取Element对象的方法、Element对象常用属性、标签对象属性设置、创建和删除标签对象等内容。

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>