7th week blog

Posted 2021-01-13 hayaasyh

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：javacsript是通过访问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跳转当前网页的网址），