BOM和DOM

Posted chen-sx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BOM和DOM相关的知识,希望对你有一定的参考价值。

BOM和DOM

BOM对象

什么是BOM

  • BOM(Brower Object Model,浏览器对象模型),主要用来访问和操作浏览器各组件的一种方法。
  • BOM对象有:window、location、history、screen、navigator、document、frames[]

windows对象

Window 对象是 javascript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

  • document 对 Document 对象的只读引用

  • location 用于窗口或框架的 Location 对象

  • history 对 History 对象的只读引用。

  • document.tilte 设置网页的标题

  • moveto() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

  • moveby() 相对于目前的位置移动。

  • resizeTo() 调整当前浏览器的窗口。

  • open() 打开新窗口显示指定的URL(有的浏览器中是打一个新的选项卡)

  • setTimeout(vCode, iMilliSeconds) 超时后执行代码。

  • setInterval(vCode, iMilliSeconds) 定时执行代码,第一次也是先待,到时再执行。

onchange事件:当内容(值)发生改变时,去调用一个JS函数

onload事件:当网页内容(<body>中所有数据)加载完毕时,去调用一个JS函数 所有数据:指网页中的内容、图片、视频等都算。因此产生一个jQuery。

onclick事件:当点击元素时

screen屏幕对象

  • width:指屏幕的宽度,含任务栏
  • height:指屏幕的高度,是屏幕分辨率
  • availWidth:有效宽度,不含任务栏
  • availHeight:有效高度,不含任务栏

navigator浏览器软件对象

  • appName:指浏览器软件的名称
  • appVersion:指浏览器版本号
  • platform:操作平台
  • systemLanguage:系统语言
  • userLanguage:用户语言

Location地址栏对象

  • href:是指完整的URL地址,经常用于“网页跳转”

  • protocol:访问的协议 如:http://

  • host:主机名称 ,如:www.sina.com.cn

  • pathname:路径和文件名,如:about/index.html

  • search:查询字符串,如:?username=yao&password=123456

  • hash:锚点名称,如:#top 注意:以上各个属性,可以直接赋值。当赋一个新值时,将自动刷新网页。

  • reload():重载网页,相当于“刷新”按钮

history浏览历史对象

  • length:有多少条历史记录

  • back():相当于“返回”按钮

  • forward():相当于“前进”按钮

  • go(n):跳转到n指定的历史记录,n可以是0,-1代表上一页、1下一页

  • history.go(1):前进

  • history.go(-1):后退

  • history.go(0):刷新

Dom对象

什么是Dom

  • dom: document object model 文档对象模型
  • js语言 与 html/xml标签之间沟通的一个桥梁
  • 为了方便javascript语言通过dom操作html比较方便,把html标签的内容划分为各种节点:

文档节点(document),元素节点,文本节点,属性节点,注释节点

  • dom就是学习利用javascript如何实现对html标签内容的增、删、改、查等操作

  • document

代表当前页面的整个文档树。

访问属性

  • all
  • forms
  • images
  • links
  • body

访问方法(最常用的DOM方法)

<html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">// 获取dom 树, 获取document 对象.var dom = window.document;
// all 获取页面中所有的标签节点 ,注释和文档类型约束.functiontestAll() {
	var allArr = dom.all;
	alert(allArr.length);
	for (var i = 0; i < allArr.length; i++) {
		//获取节点名称
		alert(allArr[i].nodeName);
	}
}
// anchors 获取页面中的所有的锚连接.functiontestAnchors() {
	var anArr = dom.anchors;
	alert(anArr.length);
}
// froms  获取所有的form 表单对象functiontestForms() {
	var formArr = dom.forms;
	alert(formArr.length);
	alert(formArr[0].nodeName);
}
// imagesfunctiontestImages() {
	var imageArr = dom.images;
	alert(imageArr.length);
}
// links  获取页面的超链接.functiontestLinks() {
	var linkArr = dom.links;
	//alert(linkArr.length);for (var i = 0; i < linkArr.length; i++) {
		//alert(linkArr[i].nodeName);
	}
	for (var i in linkArr) {
		alert(i);
	}
}
//testLinks();// 获取页面的Bodyvar body = dom.body;
alert(body.nodeName);
</script><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>javascript</title></head><body onmousemove="test(this)"><img src="xxx"alt="这是一个美女"/><img src="xxx"alt="这是一个美女"/><img src="xxx"alt="这是一个美女"/><a href="http://www.baidu.com">百度一下</a><a href="http://www.google.com">百度两下</a><a href="http://www.baigu.com">百谷一下</a><a name="one"></a><a name="two"></a><form><label>姓名:</label><!--默认不写type 就是文本输入框--><input  type="text"/></form></body></html>
  • 获取节点对象案例
Var dom = window.document;
functiontestByTagName() {
	var iptArr = dom.getElementsByTagName("input");
	for (var i = 0; i < iptArr.length; i++) {
		alert(iptArr[i].value);
	}
}
// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,//window.onload = testByTagName;//2,得到所有标签id为"username"的结果。获取旧value值并设置value值functiontestById() {
	var user = dom.getElementById("username");
	alert(user.value);
	user.value = "rose";
}
//testById();//3. 获取所有标签name 为like的元素.获取value值.functiontestByName() {
	var likeArr = dom.getElementsByName("like");
	for (var i = 0; i < likeArr.length; i++) {
		alert(likeArr[i].value);
	}
}
testByName();
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">functiongetSum()
{
	/*
	需求:通过点击总金额按钮获取被选中的条目的金额的总和,并将总金额显示在按钮右边。
	思路:
	1,先获取所有的checkbox对象。
	2,对这些对象进行遍历。判断哪个对象被选中。
	3,对被选中对象的金额进行累加。
	4,显示在按钮右边。
	*/var items = document.getElementsByName("item");
	var sum = 0;
	for(var x=0; x<items.length; x++)
	{
		if(items[x].checked)
		{
			sum += parseInt(items[x].value);
		}
	}
	var str = sum+"元";
	document.getElementById("sumid").innerHTML = str.fontcolor(‘red‘);
}

functioncheckAll(node)
{
	/*
	需求:通过全选checkbox,将其他条目都选中。
	思路:
	只要将全选checkbox的checked状态赋值给其他的item checked状态即可。
	
	
	*///var allNode = document.getElementsByName("all")[index];var items = document.getElementsByName("item");
	for(var x=0; x<items.length; x++)
	{
		items[x].checked = node.checked;
	}
}
</script></head><body><div>商品列表</div><input type="checkbox"name="all"onclick="checkAll(this)"  /> 全选<br /><input type="checkbox"name="item"value="3000" />笔记本电脑3000元<br /><input type="checkbox"name="item"value="3000"  />笔记本电脑3000元<br /><input type="checkbox"name="item"value="3000"  />笔记本电脑3000元<br /><input type="checkbox"name="item"value="3000"  />笔记本电脑3000元<br /><input type="checkbox"name="item"value="3000"  />笔记本电脑3000元<br /><input type="checkbox"name="item"value="3000"  />笔记本电脑3000元<br /><input type="checkbox"name="all"onclick="checkAll(this)"  /> 全选<br /><input type="button"value="总金额:"onclick="getSum()" /><span id="sumid"></span></body></html>
  • 通过节点关系查找节点

从一个节点出发开始查找:

parentNode 获取当前元素的父节点。

childNodes 获取当前元素的所有下一级子元素。

firstChild 获取当前节点的第一个子节点。

lastChild 获取当前节点的最后一个子节点。

nextSibling 获取当前节点的下一个节点。(兄节点)

previousSibling 获取当前节点的上一个节点。(弟节点)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">//节点和节点之间的关系.//获取dom树var dom = window.document;
//获取指定id 的标签节点.functiontest() {
	var form = dom.getElementById("form1");
	//获取父节点.//alert(form.parentNode.nodeName);// 获取子节点(Node 包含 文本,注释,标签)var childArr = form.childNodes;
	//alert(childArr.length);/*
	for (var i = 0; i < childArr.length; i++) {
	alert(childArr[i]);
	}
	*/// 获取第一个孩子.var first = form.firstChild;
	//alert(first);//最后一个孩子.var last = form.lastChild;
	//alert(last);// 获取下兄弟(获取弟弟)var sibling = form.nextSibling;
	//alert(sibling.nodeName);// 获取大哥var previous = form.previousSibling;
	alert(previous.nodeName);
}
test();
</script><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>javascript</title></head><body onmousemove="test(this)"><a>哈哈</a><form id="form1"><label>姓名:</label><input type="text" /></form></body></html>
  • 创建新节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script>/*
创建节点:
document.createElement("标签名")		创建新元素节点
elt.setAttribute("属性名", "属性值")	设置属性
添加节点到文档树上:
elt.appendChild(e)						添加元素到elt中最后的位置  把元素添加最后一个子节点的后面。
elt.insertBefore(new, child);			添加到elt中,child之前。
								// 参数1:要插入的节点  参数2:插入目标元素的位置	 
														
*//*
function add(){
	//
	var inputNode = document.createElement("input"); // 创建一个节点的对象
	inputNode.setAttribute("type","file"); //给新节点设置type的属性值。
	var body = document.getElementsByTagName("body")[0];
	body.appendChild(inputNode);	//把新节点添加到body体中。
}
*/var count = 1;
functionadd(){
	var trNode  = document.createElement("tr");
	var tdNode  = document.createElement("td");
	var inputNode  = document.createElement("input");
	inputNode.setAttribute("type","button");
	inputNode.setAttribute("value",count+"");
	count++;
	tdNode.appendChild(inputNode);
	trNode.appendChild(tdNode);
	//trNode添加 到指定 的位置上。var tbodyNode = document.getElementsByTagName("tbody")[0];
	//tableNode.appendChild(trNode);var button1 = document.getElementById("b1");
	tbodyNode.insertBefore(trNode,button1); // 注意: 使用obj.insertBefore(o1,o2)这个方法的时候//obj必须是o1,o2的直接父节点。//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
</script><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table><tr><td><input type="button"value="0"></td></tr><tr id="b1"><td><input type="button"value="添加"onclick="add()"></td></tr></table><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script>functionaddFile(){
		var trNode = document.createElement("tr");
		var td1  = document.createElement("td");
		var td2  = document.createElement("td");
		td1.innerHTML="<input type=‘file‘/>";
		td2.innerHTML="<a href=‘#‘ onclick=‘deleteFile(this)‘>删除附件</a>"
		trNode.appendChild(td1);
		trNode.appendChild(td2);
		//把trNode添加 到添加按钮上面var addButton = document.getElementById("addButton");
		var tbody = document.getElementsByTagName("tbody")[0];
		tbody.insertBefore(trNode,addButton);
	}


	functiondeleteFile(deleteNode){
		//找到要删除的tr  a---->td---->trvar trNode  = deleteNode.parentNode.parentNode;  //获取到了要删除的tr节点。// 找 到trNode的父节点var tbodyNode  =document.getElementsByTagName("tbody")[0];
		tbodyNode.removeChild(trNode);
		//trNode.removeNode(true); // removeNode() 在firefox上不 支持,在ie支持。
	}


</script><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><table><tr><td><input type="file"></td><td><a  href="#"onclick="deleteFile(this)">删除附件</a></td></tr><tr id="addButton"><td><input type="button"value="添加附件"onclick="addFile()"/></td></tr></table></body></html>

以上是关于BOM和DOM的主要内容,如果未能解决你的问题,请参考以下文章

DOM和BOM

DOM和BOM

JS之BOM与DOM

JavaScript操作Bom对象

BOM和DOM的区别

BOM和DOM