7th week blog
DOM和BOM的source,methods,content,application
DOM:
(1)source:就在浏览器制造商以DOM为武器展开营销大战是,W3C(万维网联盟World Wide Web Consortium)不事声张地结合大家的优点推出了一个标准化的DOM,令人欣慰的是,Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准,并于1998年10月完成了"第一级DOM(DOM Level 1)"。现已发展至3级DOM。
作为DOM的统一者W3C对DOM的定义是:“一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档(html或xml文档)的内容、结构和样式。”
就是一句话,DOM是一个接口,我们可以通过DOM这个接口来对文档(即HTML或XML)进行修改。
(2)methods:
1、childNodes 返回当前元素所有子元素的数组 2、firstChild 返回当前元素的第一个子元素 3、lastChild 返回当前元素的最后一个子元素 4、nextSibling 返回紧跟在当前元素后面的元素
5、nodeValue 指定表示元素值的读/写属性 6、parentNode 返回元素的父节点 7、previousSibling 返回紧邻当前元素之前的元素 8、hasChildNodes() 返回一个布尔值,指示元素是否有子元素
9、createElement(element) 创建元素节点 10、createTextNode() 创建文本节点 11、cloneNode() 为给定节点创建一个副本,参数为true或false,true表示同时复制该节点的子节点,false表示不复制子节点 12、appendChild() 把新的子节点添加到指定节点 13、removeChild() 删除子节点 14、replaceChild() 替换子节点 15、insertBefore() 在指定的子节点前面插入新的子节点
16、createAttribute() 创建属性节点 17、getAttribute() 返回指定的属性值 18、setAttribute() 把指定属性设置或修改为指定的值 19、nodeName 将返回一个字符串,其内容是给定节点的名字 20、nodeType 返回一个整数,代表给定节点的类型
(3)content:DOM即 Document Object Model 是 W3C (万维网联盟)的标准,DOM定义访问 HTML 和 XML 的标准 : W3C文档对象模型(DOM)是中立于平台和语言的接口, 它允许程序 和脚本 动态的访问和更新文档的内容,结构和样式。
W3C Dom 标准被分为 3 个不同的部分: 1.核心DOM -针对任何结构化文档的标准模型 2.XML DOM -针对XML文档的标准模型 3.HTML DOM - 针对HTML文档的标准模型
(4)application:
1.改变HTML元素
(1)改变HTML输出流
利用document.write()可用于直接向HTML输出流中写内容。
不要在文档加载之后使用document.write(),这会覆盖该文档
(2)改变HTMl内容
利用innerHTML属性即可办到
(3)改变HTML属性 使用这个语法即可办到:document.getElementById(id).attribute=new value
2.改变HTML元素的样式,即CSS
document.getElementById(id).style.property=new style使用该语法就可实现。
3.对HTML事件做出反应
HTML事件的例子:
用户按下鼠标,用户松开鼠标,用户点击鼠标这一个完整的过程,用户将鼠标移动到元素上,用户将鼠标从元素上移开,输入字段被改变,文档已加载时,提交HTML表单时
4.添加和删除HTML元素节点
BOM:
(1)source:js是通过访问Bom(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于Bom的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。
(2)methods:alert() 弹出框,confirm() 带确认,取消弹出框,setInterval() 每隔多少秒调用一次,clearInterval() 清除setInterval,setTimeout() 隔多少秒调用一次,cleartimeout() 清除setTimeout,open() 打开一个新的窗口
eg : window.open("other.html"," _blank","width=200,height=300,top=300");
console:最常用的就是console.log()浏览器控制台打印
(3)content:
1)window对象:浏览器中打开的窗口
① 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
② window.frames 返回窗口中所有命名的框架
③parent是父窗口(如果窗口是顶级窗口,那么parent==self==top)top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)self是当前窗口(等价window)opener是用open方法打开当前窗口的那个窗口
④与消息框有关的方法:alert(String)、confirm(String)、prompt(String)
⑤两种定时器:setTimeout(code,latency) 和 setInterval(code,period)注:setTimeout只执行一次code,如果要多次调用,可以让code自身再次调用setTimeout();setInteval()会不停地调用code,直到clearInterval()被调用。2)location对象:包含当前URL信息。重点掌握location对象的href属性,用于设置或返回完整的URL。3)history对象:主要是back()/forward()和go()方法,几乎用不到。
(4)application:BOM的最基础功能:打开、关闭窗口:open方法用于打开一个窗口,相对的close方法用于关闭一个窗口。这里我们可以用open方法实现一个应用:运行代码。close的使用非常简单,使用window.close便可以执行关闭窗口的事件。但是在火狐浏览器下,是无法close一个用户打开的窗口,只有一个窗口是用open方法打开的时候才能用close方法关闭。window.nevigator.userAgent和window.location。前者的作用是获取当前浏览器的版本信息,后者的作用是获取当前网页的地址(不仅可以读取,也可以赋值,可以通过修改location跳转当前网页的网址),