zoukankan      html  css  js  c++  java
  • 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---------
  • 相关阅读:
    BZOJ1513: [POI2006]Tet-Tetris 3D
    BZOJ3210: 花神的浇花集会
    BZOJ3207: 花神的嘲讽计划Ⅰ
    BZOJ3170: [Tjoi 2013]松鼠聚会
    BZOJ3747: [POI2015]Kinoman
    解题:POI 2008 Subdivision of Kingdom
    解题:JSOI 2007 重要的城市
    解题:USACO13NOV No Change
    解题:洛谷1120 小木棍
    解题:SCOI 2008 配对
  • 原文地址:https://www.cnblogs.com/elaa/p/4041688.html
Copyright © 2011-2022 走看看