二、JavaScript基础(2)

BOM基础加强

1、浏览器对象BOM
DOM Window
DOM Navigator
DOM Screen
DOM History
DOM Location

2、浏览器对象的使用
History
History 对象包含用户(在浏览器窗口中)访问过的 URL
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面
练返回按钮制作

Location
Location 对象包含有关当前 URL 的信息
通过href属性完成超链接效果
练超链接按钮效果

3、Window对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()显示可提示用户输入的对话框。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
close()关闭浏览器窗口。
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
clearInterval()取消由 setInterval() 设置的 timeout。
alert()显示带有一段消息和一个确认按钮的警告框

4、与对话框有关的方法
window.alert(String)
Boolean window.confirm(String)
String window.prompt(String)

5、setInterval和setTimeout
setInterval(code,millisec[,"lang"])
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭

setTimeout(code,millisec)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setTimeout() 只执行 code 一次。如果要多次调用,可以让 code 自身再次调用 setTimeout()

DOM基础加强

1、DOM文档对象模型
文档:标记型文档
对象:封装了属性和行为的实例,可以直接被调用。
模型:所有的标记型文档都具有一些共性特征的一个体现。
用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签、文本、属性)都封装成对象。
封装成对象的目的是为了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。
标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档,DOM这种技术都可以对其进行操作。
常见的标记型文档包括:HTML XML。
DOM要操作标记型文档必须先进行解析

2、DOM结构模型

3、DOM三个级别和DHTML介绍
(1)DOM模型有三种:
DOM level 1:将html文档封装成对象。
DOM level 2:在level 1的基础上添加新的功能,例如:对于事件和css样式的支持。
DOM level 3:支持xml1.0的一些新特性。

(2)DHTML
动态的HTML,它不是一门语言,是多项技术综合体的简称。
包括html,css,dom,javascript。

(3)这四种语言的职责:
Html:负责提供标签,封装数据,这样便于操作数据。
Css:负责提供样式,对标签中的数据进行样式定义。
Dom:负责将标签及其内容解析,封装成对象,对象中具有属性和行为。
Javascript:负责提供程序设计语言,对页面中的对象进行逻辑操作。

4、BOM和HTML DOM关系图

5、NODE接口的特性和方法

6、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象

常用属性
all[] 提供对文档中所有 HTML 元素的访问 FF不支持
forms[]返回对文档中所有 Form 对象引用
body 提供对 <body> 元素的直接访问

常用方法
getElementById()返回对拥有指定 id 的第一个对象的引用
getElementsByName()返回带有指定名称的对象集合
getElementsByTagName()返回带有指定标签名的对象集合
write()向文档写 HTML 表达式 或 JavaScript 代码

7、Element对象
操纵 Element 对象的属性
获取属性:getAttitude(name)方法。
设置属性:setAttribute(name,value)方法。
删除属性:removeAttribute(name)方法。
在 Element 对象中查找 Element 对象
在Element对象的范围内,可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合

8、Node常用属性
nodeName
如果节点是元素节点,nodeName返回这个元素的名称
如果是属性节点,nodeName返回这个属性的名称
如果是文本节点,nodeName返回一个内容为#text 的字符串

nodeType
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点

nodeValue
如果给定节点是一个属性节点,返回值是这个属性的值
如果给定节点是一个文本节点,返回值是这个文本节点内容
如果给定节点是一个元素节点,返回值是 null

9、父节点、子节点和同辈节点
父节点: parentNode
parentNode 属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。

子节点
childNodes:获取指定节点的所有子节点集合。
firstChild:获取指定节点的第一个子节点。
lastChild:获取指定节点的最后一个子节点。

同辈节点
nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling:返回一个给定节点的上一个兄弟节点。

10、节点属性
节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点(特别是元素节点)的属性。
事实上,attributes中包含的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。

11、检查子节点和属性
查看是否存在子节点: hasChildNodes()
查看是否存在属性:hasAttributes()
即使节点中没有定义属性,其attributes属性仍然有效的,而且长度值为0。同样节点中的childNodes属性也是如此。
当你想知道某个节点是否包含子节点和属性时,可以使用hasChildNodes()和hasAttributes()方法。但是,如果还想知道该节点中包含多少子节点和属性的话,仍要使用attributes和childNodes属性。
在IE浏览器中,不存在hasAttributes()方法!

12、操作DOM节点树
插入节点
appendChild()方法
insertBefore(newNode,oldNode)方法
没有insertAfter()方法
删除节点:removeChild()方法
替换节点:replaceChild(newNode,oldNode)方法

13、移动节点
复制节点:cloneNode(boolean)方法,其中,参数boolean是判断是否复制子节点。
移动节点:由以下三种方法组合完成

查找节点
getElementById():通过节点的id属性,查找对应节点。
getElementsByName():通过节点的name属性,查找对应节点。
getElementsByTagName():通过节点名称,查找对应节点。

插入节点
appendChild()方法
insertBefore()方法

替换节点:replaceChild()方法

14、innerHTML属性
浏览器几乎都支持该属性,但不是 DOM 标准的组成部分。
innerHTML 属性可以用来读,写某给定元素里的 HTML 内容。
innerHTML 属性多与div或span标签配合使用。

原文地址:https://www.cnblogs.com/highpointengineer/p/10562929.html