国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > php开源 > php教程 > BOM和DOM

BOM和DOM

来源:程序员人生   发布时间:2016-06-06 16:14:12 阅读次数:2027次

BOM和DOM

BOM对象

甚么是BOM

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

windows对象

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

Window 对象代表1个阅读器窗口或1个框架。

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

  • document 对 Document 对象的只读援用

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

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

  • document.tilte 设置网页的标题

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

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

  • resizeTo() 调剂当前阅读器的窗口。

  • open() 打开新窗口显示指定的URL(有的阅读器中是打1个新的选项卡)

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

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

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

onload事件:当网页内容(<body>中所有数据)加载终了时,去调用1个JS函数 所有数据:指网页中的内容、图片、视频等都算。因此产生1个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 注意:以上各个属性,可以直接赋值。当赋1个新值时,将自动刷新网页。

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

history阅读历史对象

  • length:有多少条历史记录

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

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

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

  • history.go(1):前进

  • history.go(⑴):后退

  • history.go(0):刷新

Dom对象

甚么是Dom

  • dom: document object model 文档对象模型
  • js语言 与 html/xml标签之间沟通的1个桥梁
  • 为了方便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⑻" /><title>javascript</title></head><body onmousemove="test(this)"><img src="xxx"alt="这是1个美女"/><img src="xxx"alt="这是1个美女"/><img src="xxx"alt="这是1个美女"/><a href="http://www.baidu.com">百度1下</a><a href="http://www.google.com">百度两下</a><a href="http://www.baigu.com">百谷1下</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 对象提供了1个事件, onload 事件 onload(页面加载终了履行该代码) 是1个事件, 给事件1个方法,//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⑻" /><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>
  • 通过节点关系查找节点

从1个节点动身开始查找:

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

childNodes 获得当前元素的所有下1级子元素。

firstChild 获得当前节点的第1个子节点。

lastChild 获得当前节点的最后1个子节点。

nextSibling 获得当前节点的下1个节点。(兄节点)

previousSibling 获得当前节点的上1个节点。(弟节点)

<!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]); } */// 获得第1个孩子.var first = form.firstChild; //alert(first);//最后1个孩子.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⑻" /><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中最后的位置 把元素添加最后1个子节点的后面。 elt.insertBefore(new, child); 添加到elt中,child之前。 // 参数1:要插入的节点 参数2:插入目标元素的位置 *//* function add(){ // var inputNode = document.createElement("input"); // 创建1个节点的对象 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⑻" /><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⑻" /><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>
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生