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跳转当前网页的网址)

 

 

 

posted @ 2018-10-20 12:54  hayaahan  阅读(112)  评论(0编辑  收藏  举报