zoukankan      html  css  js  c++  java
  • Dom和Bom

    1.什么是DOM:

    DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML 交互的API文档。DOM 是载入到浏览器中的文档模型,它用节点树的形式来表现文档,每个节点代表文档的构成部分(例如: element——页面元素、字符串或注释等等)。

    DOM 是Web——万维网上使用最为广泛的API之一,因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建,移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

    DOM 并不是天生就被规范好了的,它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在, WHATWG维护DOM生活标准。

     2.什么是bom:

    BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

    弹出新的浏览器窗口
    移动、关闭浏览器窗口以及调整窗口大小
    提供 Web 浏览器详细信息的定位对象
    提供用户屏幕分辨率详细信息的屏幕对象
    对 cookie 的支持
    IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

    window对象对应着浏览器窗口本身,这个对象的属性和方法通常被称为BOM

    DOM包含:window

     
    Window对象包含属性:document、location、navigator、screen、history、frames
    
    Document根节点包含子节点:forms、location、anchors、images、links


    3.BOM的一些使用:

    1.对节点的增删改查:

    .查:

     1. 查看元素节点:

         注:没加s,都代表一个,加了s,都代表类数组,用数组的方式获取每一个[0],使用,.length获取数组长度,代表html第一个,[1]代表html中的第二个,比如  

    1. document代表整个文档

            注:使用这些方法都要以document.获取方法

    1. document.getElementById() //元素idie8以下的浏览器,不区分id  大小写,而且也返回匹配name元素的属性

           

    3  .getElementsByTagName() ;//标签名

           注:把html中所有你选择的标签一样的标签,所以才加了s,菜不代表一个

     4  .getElementsByName(); 需注意,只有部分标签name可生效(表单,表单元素,imgiframe)

    5  .getElementsByClassName()//类名->ie8ie8 以下的ie版本中可以多个class一起

    注:这个不是一个哦!还是整个【0】;

    1. .querySelector() //css选择器 在ie7ie7以下版本中没有

            2..querySelectorAll() //css选择器 在ie7ie7以下版本中没有

    遍历节点树:

          parentNode ->父节点(最顶端的parentNode#document;

             chiledNodes ->子节点

             firstChild ->第一个子节点

             LastChild ->最后一个子节点

             NextSibling ->后一个兄弟节点  previousSibling _>前一个兄弟节点

              

    节点的四个属性:

       1 NodeNmae

       元素的标签名,以大写形式表示,只读

        2.nodeValue

    Text节点或Comment节点的文本内容,可读写

    3.nodeType

    该节点类型,只读

    4.attributes

    4.Element节点的属性集合

    事件:

    获取:

    以下用div变量为代表做列子

    1. 绑定事件处理函数:

    比如:div.onxxx=function{}(这个xxx代表事件类型:on+事件类型)

    1. 行间,在html中写:onxxx=“执行语句”

      3.div.addEventListener(事件类型,处理函数(可以是外带一个的函数的函数名名),false)

      注释:一个事件可以绑定多个处理程序

      或者

      如果这里是test(),不用点就会触发

       绑定多个函数:

     4.obj.attachEvent(‘on+xxx,函数)  注:IE浏览器特有

    DOM方法:

    1.

    一:获取和修改标签属性:

    1.获取标签元素的属性:

    0bject.getAttribute(‘属性’);

    2.修改标签元素的属性:  

    0bject.setAttribute(‘属性’,value;

    例如:

    Html:

    Js:

    1. 绑定标签
    2. 记住classname绑定是加了s,所以使用数组的方法,获取元素属性并打印
    3. 修改标签title属性
    4. 打印修改后的元素属性

    结果:

      

    二:打开新窗口:

    window.open(urlnamefeatures) //后面俩个属性可以不要

    2.

    1. 创建元素:

      createElement方法:document.createElement(NodeName)

      查看节点名称:nodeName; 返回的是字符串,比如pbody....

      查看节点类型:nodeType; 返回的是数字

    1. 创建文本节点:

       createTextNode方法:document.createTextNode(text)

    1. 设置元素位置:

       appendChild方法:节点.appendChildchild

    Html:

       

    JavaScript:                       

    em元素插入到div元素中        给em元素添加文本节点       

    结果:

             

  • 相关阅读:
    BZOJ3752 : Hack
    XIV Open Cup named after E.V. Pankratiev. GP of SPb
    XIII Open Cup named after E.V. Pankratiev. GP of Ukraine
    BZOJ2087 : [Poi2010]Sheep
    BZOJ2080 : [Poi2010]Railway
    BZOJ2082 : [Poi2010]Divine divisor
    Moscow Pre-Finals Workshop 2016. National Taiwan U Selection
    XIII Open Cup named after E.V. Pankratiev. GP of Asia and South Caucasus
    XIII Open Cup named after E.V. Pankratiev. GP of Azov Sea
    XIII Open Cup named after E.V. Pankratiev. GP of SPb
  • 原文地址:https://www.cnblogs.com/zhangjiayimy/p/9855651.html
Copyright © 2011-2022 走看看