04 DOM一窥

BOM 浏览器对象模型

* window

      alert(); 弹出框

confirm() 询问框

setInterval("run()",1000); 每隔1秒执行run方法，返回唯一的id值

setTimeout("run()",1000); 一秒后执行run方法,返回唯一的id值

      clearInterval(id)

      clearTimeout(id)

      open(); 弹出新的窗口

      close(); 关闭窗口

 

* navigator

 

* history

* forward()

* back()

* go()

 

location

      href="设置或者获取链接"

 

---

dom将标签封装成对象,可以在对象中定义属性和行为,可以方便操作这些对象.

 

DOM在封装标记型文档,有三种模型

     DOM1: 针对html文档

     DOM2: 针对xml文档

     DOM3: 针对xml文档

 

DHTML: 是多项技术的综合体,叫做动态html.

 

标签之间存在着层次关系.

---

节点

     根据 DOM，HTML 文档中的每个成分都是一个节点。

     DOM 是这样规定的：

          整个文档是一个文档节点 

          每个 HTML 标签是一个元素节点 

          包含在 HTML 元素中的文本是文本节点 

          每一个 HTML 属性是一个属性节点 

          注释属于注释节点 

---

查找并访问节点,你可通过若干种方法来查找您希望操作的元素：

     通过使用 getElementById() 和 getElementsByTagName() 方法 

     通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

parentNode、firstChild以及lastChild

     可遵循文档的结构，在文档中进行“短距离的旅行”。

---

DOM节点信息

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

     nodeName（节点名称） 

          文档节点的 nodeName 永远是 #document 

          元素节点的 nodeName 是标签名称 

          属性节点的 nodeName 是属性名称 

          文本节点的 nodeName 永远是 #text 

               注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

 

     nodeValue（节点值）           

          对于文档节点是不可用的。

          对于元素节点是不可用的。

          对于属性节点，nodeValue 属性包含属性值。

          对于文本节点，nodeValue 属性包含文本。

 

     nodeType（节点类型） 

          nodeType 属性可返回节点的类型。

          最重要的节点类型是：

---

document 代表整个文档

Element 代表元素(标签对象)

     getAttribute("属性名称") 

     setAttribute("属性名称","属性的值") 

     removeAttribute("属性名称")

     

     Element.get

attrubute 代表属性对象

text 文本对象

node 节点对象

     nodeName 节点名称

     nodeType  节点类型

     nodeValue 节点值

 

IE6-8                                 IE9-11 Chrome FireFox

firstChild 第一个节点          firstElementChild  第一个节点

lastChild最后一个节点、     lastElementChild   最后一个节点

nextSibling 下一同级节点   nextElementSibling  下一同级节点

previousSibling 上一同级节点 previousElementSibling上一同级节点

<ul>

     <li></li>

     <li></li>

</ul>

     * 通过ul想获取第一个li的标签对象，使用firstElementChild属性

* （条件：IE9-11 Chrome FireFox）

* 如果使用的比较早版本，使用firstChild属性。

<span>

     文本内容

</span>

     * 通过span标签获取文本内容，直接使用firstChild属性。

* hasChildNodes() 判断是否包含子节点，返回true或者false

* hasAttributes() 判断是否有属性

 

---

节点的操作

在尾部添加子节点

     appendChild()     在末尾添加节点

     insertBefore(new,old)    在指定节点之前添加子节点

          注:没有insertAfter()方法

 

删除节点: 

     removeChild()

 

获取节点:

     cloneNode(boolean) 如果设置为true,子节点会被一起复制,如果为false或默认不写,则不会被复制

 

修改节点

     replaceChild(new,old) 老节点移动并占领新节点

 

判断节点:

 

---

innerHTML属性

     获取和设置文本内容

 

事件

     点击事件conclick ondbclick

     加载和卸载事件onload onunload

     聚焦和离焦 onfucus onblur

     键盘onkeyup

     改变 onchange

     控制表单提交 onsubmit

---

练习一:onsubmit练习

No.2 最后10分钟

XML语言

     可扩展的标记语言(自定义标签)

     和HTML非常的相似

 

XML约束  

 

解析XML(Java代码)