当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 7.15 Bom和Dom

7.15 Bom和Dom

2020年07月17日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网