欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

7.15 Bom和Dom

程序员文章站 2022-03-11 16:29:31
7.15 Bom和DomBomWindow对象Window对象是BOM中的*对象window对象表示整个浏览器窗口。JavaScript中的任何一个全局函数或变量都是window的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。例如：alert，定时器都是window对象的方法。调用它的子对象时可以不显示的指明window对象。open()window.open(“要打开的网页”, “网页名字”, “height=400,width=400,top=1...

7.15 Bom和Dom

Bom

Window对象

Window对象是BOM中的*对象
window对象表示整个浏览器窗口。
JavaScript中的任何一个全局函数或变量都是window的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。例如：alert，定时器都是window对象的方法。调用它的子对象时可以不显示的指明window对象。

  • open()

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

  • close()

  • innerHeight

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

  • innerWidth

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

  • outerWidth

    • 可以获取浏览器窗口的整个宽

  • outerHeight

    • 可以获取浏览器窗口的整个高

  • screenLeft

    • 窗口距离屏幕左上角的位置

  • screenTOP

  • 窗口距离屏幕顶部的位置

  • screenX

  • 鼠标指针相对于屏幕的水平坐标。

  • screenY

  • 鼠标指针相对于屏幕的垂直坐标。

history对象

  • back()

  • back()方法用于模仿浏览器的后退按钮，相当于history.go(-1)

  • forward()

  • forward()方法用于模仿浏览器的前进按钮，相当于history.go(1)

  • go()
    使用go()方法可以在用户的历史记录中任意跳转。这个方法接收一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类似于前进按钮)

    • 0

      • 刷新页面

    • -1

      • 后退一页

    • 1

      • 前进一页

    • 2

      • 前进两页

  • history.pushState({a:1}),“shop”,"?data="+n);

    • history.pushState()方法向浏览器历史添加了一个状态。pushState()方法带有三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址

    • - history.pushState(state, title, url);

    • state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null
      title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
      URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL

    • pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化

    • 如果pushState的url参数，设置了一个新的锚点值(即hash)，并不会触发hashchange事件，即使新的URL和旧的只在hash上有区别

    • 如果设置了一个跨域网址，则会报错。这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上

  • window.onpopstate=function(){}

    • 触发回退

  • history.replaceState()

    • 用来在浏览历史中添加和修改记录。会修改当前历史记录条目而并非创建新的条目.

  • length

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

location对象

  • reload()

    • 重新加载当前页面

  • href

    • 可以设置跳转当前页面地址
    • location.href = “https://www.baidu.com/”;

  • assign

    • 可以设置跳转当前页面地址
    • location.assign(“https://www.baidu.com/“)

  • replace

    • location.replace(“https://www.baidu.com/”);
    • 不产生历史记录

  • hash

    • 获取#号后面的锚点

  • search

    • 获取?号后面的参数

  • hostname

    • 返回 web 主机的域名

  • pathname

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

  • port

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

  • protocol

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

screen对象

  • availHeight

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

  • availWidth

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

  • height

    • 屏幕的高度像素

  • width

    • 屏幕的宽度像素

navigation对象

  • userAgent

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

  • appName

    • 返回浏览器的名称。

  • appVersion

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

  • platform

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

Dom

Dom节点

  • 什么是节点

HTML 文档中的每个成分都是一个节点。
（1）节点类型
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
（2）节点层次关系-节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
<head> 和 <body> 的父节点是 <html> 节点，文本节点 “Hello world!” 的父节点是 <p> 节点。
<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 “DOM Tutorial”。
当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1> 和 <p>是同辈，因为它们的父节点均是 <body> 节点。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。
（3）节点属性
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

  • nodeName（节点名称）
  1. 元素节点的 nodeName 是标签名称
  2. 文本节点的 nodeName 永远是 #text
  3. 注释节点的 nodeName 永远是 #comment
  • nodeValue（节点值）
  1. 文本节点，nodeValue 属性包含文本
  2. 元素节点nodeValue不可用
  3. 注释节点nodeValue包括注释内容

  • nodeType（节点类型）

    • 节点属性

      • nodeName（节点名称）

        • 元素节点的 nodeName 是标签名称
        • 文本节点的 nodeName 永远是 #text
        • 注释节点的 nodeName 永远是 #comment

      • nodeValue（节点值）

        • 文本节点，nodeValue 属性包含文本。
        • 注释节点nodeValue包括注释内容

      • nodeType（节点类型）

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

  • 获取Dom元素

    • documeng.getElementById()

      • 通过id获取元素

    • document.getElementByTagName()

      • 通过标签名获取标签列表，只能通过document获取,HTMLCollection

    • document.getElementByName()

      • 通过name属性获取节点列表，只能通过document获取,NodeList是有forEach方法遍历

    • document.getElementByClassName(新)

      • 通过Class名获取标签列表，任何标签都可以获取其子项中Class列表,HTMLCollection

    • document.querySelector(新)

      • 根据标签名获取第一个元素

    • document.querySelectorAll(新)

      • 获取所有标签名的元素

  • 节点的创建

    • document.createElement(“标签名”) : 创建新元素
    • document.createTextNode("") : 创建文本节点

  • 节点的插入

    (父对象.insertBefore(新插入的对象，目标插入对象之前（兄弟节点对象）,当父对象下无子节点的时候不适用)
    document,.body

    • appendChild(node) : 向childNodes末尾插入一个节点node
    • insertBefore(newElement,targetElement) : 向targetNode之前插入节点node

  • 节点的替换

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

  • 节点的删除

    • removeChild(node) : 移除父节点的某个子节点
    • remove()：移除当前节点

  • 节点的复制

    cloneNode(boolean) : 复制一个节点 复制节点后使用插入或者添加都可以完成节点的粘贴，但是仅能粘贴一次，仅为最后一次
    true：深复制，复制节点及其整个子节点树
    false : 浅复制，只复制节点本身。

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

  • 节点的遍历

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

Dom属性

  • DOM 对象属性

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

  • DOM 标签属性

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

    • getAttribute(属性)：

      • 获取标签属性

    • setAttribute(属性,值)：

      setAttribute(属性,值)： 我们想要把 一个 类名 改为 demo
      div.setAttribute(“class”,”demo”);

      • 给节点创建一个新属性

    • removeAttribute(name)

      • 删除标签属性

  • Dom常用属性

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

Bom和Dom的区别

BOM

  1. BOM是Browser Object Model的缩写，即浏览器对象模型。
  2. BOM没有相关标准。不同浏览器定义有差别,实现方式不同。
  3. BOM的最根本对象是window。
    DOM
  4. DOM是Document Object Model的缩写，即文档对象模型。
  5. DOM是W3C的标准。
  6. DOM最根本对象是document（实际上是window.document）。
  7. DOM的最根本的对象是BOM的window对象的子对象
  8. BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

本文地址：https://blog.csdn.net/w_cyj/article/details/107368494

相关标签： js

上一篇： linux——ln建立连接档

下一篇： 网站静态化——前后端分离（下）

推荐阅读