BOM、DOM

Iris_
134 阅读6分钟

BOM、DOM

Bom对象

什么是Bom

  • Browser Object Model 浏览器对象模型
  • 所有的window都属于bom
  • 有对象，包括属性和方法

window对象

  • open()

    • 打开
    • window.open("要打开的网页", "网页名字", "height=400,width=400,top=10,left=10");

  • close()

    • 关闭

  • innerHeight

    • 浏览器窗口的内部高度(兼容所有浏览器)—包含滚动条

  • innerWidth

    • 浏览器窗口的内部宽度(兼容所有浏览器)

  • outerWidth

    • 可以获取浏览器窗口的整个宽（外部）

  • outerHeight

    • 可以获取浏览器窗口的整个高（外部）

  • screenLeft

    • 窗口距离屏幕左上角的位置（不能设置）

  • screenTop

    • 同上

  • screenX

    • 同上

  • screenY

    • 同上

location对象

  • reload()

    • 重新加载当前页面

  • href

    • location.href = "www.baidu.com/"; 设置跳转当前页面地址
    • console.log(location.href) 获取当前页面的地址

  • assign

  • replace

    • location.replace("www.baidu.com/"); 同上，但不产生历史记录

    • href、assign、replace三者区别

      • 前两个有历史记录，replace不产生历史记录
      • href是属性设值，assign是方法传参

  • hash

    • 获取到url中#后的字符串，如果没有，则返回空字符串。

  • search

    • 获取?号后面的参数

  • hostname

    • 返回 web 主机的域名

  • pathname

    • 返回当前页面的路径和文件名

  • port

    • 返回 web 主机的端口 （80 或 443）

  • protocol

    • 返回所使用的 web 协议（http:// 或 https://）

history对象

  • back

    • 向后退一页

  • forward

    • 向前进一页

  • go

    • 空 0 刷新页面
    • 参数为-1：后退一页
    • 参数为1：前进一页
    • 参数为2：前进两页

  • history.pushState(）; 增设一个跳转记录

    • 方法接受三个参数依次为：state，title，url
    • state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
    • title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
    • url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
    • 使用pushState方法在浏览记录（history对象）中添加一个新记录

  • replaceState（）； 替换跳转记录

    • 参数与pushState方法一模一样，区别是它修改浏览历史中当前纪录

  • window.onpopstate = function () {｝

  • length

    • 属性返回历史列表中的网址数

screen对象

  • availHeight

    • 屏幕的高度像素减去系统部件高度之后的值（不包含任务栏）

  • availWidth

    • 屏幕的宽度像素减去系统部件宽度后的值（不包含任务栏）

  • height

    • 屏幕的高度像素（包含任务栏）

  • width

    • 屏幕的宽度像素（包含任务栏）

navigator对象

  • userAgent

    • 返回由客户机发送服务器的 user-agent 头部的值

  • appName

    • 返回浏览器的名称。

  • appVersion

    • 返回浏览器的平台和版本信息。

  • platform

    • 返回运行浏览器的操作系统平台。

  • 获取浏览器信息

    • function getBrowserInfo(){ if(navigator.userAgent.indexOf("Chrome")>-1) return "Chrome:"+navigator.userAgent.split("Chrome")[1].split(" ")[0].slice(1);

      if(navigator.userAgent.indexOf("Firefox")>-1) return"Firefox:"+navigator.userAgent.split("Firefox")[1].slice(1); }

Dom对象

什么是Dom

  • Document Object Model 文档对象模型
  • 所有的document都是dom
  • 有对象，包括属性和方法

节点

  • 什么是节点

    • 节点 node

      • 整个文档是一个文档节点
      • 每个 HTML 标签是一个元素节点
      • 包含在 HTML 元素中的文本是文本节点
      • 每一个 HTML 属性是一个属性节点
      • 注释属于注释节点

    • 节点属性

      • nodeName（节点名称）

        • 元素节点的 nodeName 是标签名称

          • 任何标签的nodeName都是该标签的大写字母

        • 文本节点的 nodeName 永远是 #text

        • 注释节点的 nodeName 永远是 #comment

      • nodeValue（节点值）

        • 文本节点，nodeValue 属性包含文本。
        • 元素节点nodeValue不可用
        • 注释节点nodeValue包括注释内容

      • nodeType（节点类型）

        • 元素---1
        • 属性----2
        • 文本----3
        • 注释---8
        • 文档----9

      • 拓：判断标签的两种方法：

        • .nodeName==="DIV"
        • .constructor===HTMLDivElement

  • 获取Dom元素

    • document.getElementById() ID获取元素

    • document.getElementsByTagName() 通过标签名获取标签列表

      • 只能通过document获取
      • 获取的是HTMLCollection

    • document.getElementsByName() 通过name属性获取节点列表

      • 只能通过document获取

      • 获取的是NodeList

        • Nodelist 自身有方法，是有foreach方法遍历的

          • 例如： var list=document.getElementsByName("sex"); list.forEach(function(item){ console.log(item); })

    • document.getElementsByClassName() 通过Class名获取标签列表

      • 任何标签都可以获取其子项中Class列表
      • 获取的是HTMLCollection

    • document.querySelector( 所有CSS选择器) 根据标签名获取第一个元素

      • 可通过ID（”#div”） ，class（”.div”） ，属性选择（”[type=text]”）

    • document.querySelectorAll(所有CSS选择器) 获取所有标签名的元素

  • 节点遍历

    • childNodes：所有子节点 获取所有子节点（包括注释）
    • children：所有是标签类型的子节点 获取所有子元素(纯标签，没有注释节点)
    • parentNode：获取已知节点的父节点
    • firstElementChild : 第一个子元素
    • firstChild : 第一个子节点
    • lastElementChild：最后一个子元素
    • lastChild：最后一个子节点
    • nextElementSibling：下一个兄弟元素
    • nextSibling：下一个兄弟节点
    • previousElementSibling：上一个兄弟元素
    • previousSibling：上一个兄弟节点
    • parentNode：父节点
    • parentElement：父元素

  • 创建节点

    • document.createElement("标签名") : 创建新元素

    • document.createTextNode("") : 创建文本节点

    • 拓展：

      • 碎片容器 document.createDocumentFragment()

  • 插入节点

    • appendChild(node) : 向childNodes末尾插入一个节点node

    • insertBefore(newElement,targetElement) : 向targetNode之前插入节点node

      • 参数：第一个表示要插入的元素，第二个表示插入在谁的前面

  • 替换节点

    • replaceChild(newNode,oldNode) : newNode替换节点oldNode

  • 删除节点

    • removeChild(node) : 移除父节点的某个子节点

      • 父. removeChild(子)

    • remove()：移除当前节点

    • 注：

      • 删除时，元素仅仅是从页面中删除，不是从内存中删除。如果在没有清除内存的情况下，还可以加入回去
      • 删除时，需要在设置null之前将事件也删除

  • 复制节点

    • cloneNode(boolean) : 复制一个节点

      • 复制元素=复制目标.cloneNode(深浅复制)

      • true 深复制 复制元素和元素的所有子元素和节点

      • false 浅复制 仅复制当前元素

      • 注：

        • 复制标签时，会标签的属性一起复制
        • 有ID的还需要修改ID

Dom属性

  • DOM的对象属性

    • 分为自定义型和原DOM对象属性
    • DOM的对象原属性与DOM对象的标签属性部分对应，部分有差别

  • DOM 标签属性

    • 设置标签属性

      • setAttribute(属性,值)：

        • 设置标签的属性和值，值和属性都必须是字符类型
        • DOM的标签属性命名，不能使用大小写区分不适用下划线区分
        • 属性名必须全小写字母，并且使用-区分每个单词

    • 获取标签属性

      • getAttribute(属性)：

    • 删除标签属性

      • removeAttribute(name)

    • Dom常用属性

      • document.body：body元素
      • document.title：获取、设置文档的标题
      • document.URL：获得完整的URL
      • document.domain：获取域名

XMind: ZEN - Trial Version

avatar
文章
阅读
粉丝