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代码)
---------thinking、architecture、code、treasure---------
原文地址:https://www.cnblogs.com/elaa/p/4041688.html