zoukankan      html  css  js  c++  java
  • BOM和DOM深入

    方才简单说明了BOM与DOM,本篇进一步了解一下。

    BOM

    window 对象属性
    • name:指浏览器窗口的名字或框架的名字;(这个名字是给 <a> 标记的 target 属性来用的)
    • top:代表最顶层窗口;
    • parent:代表父级窗口,主要用于框架;
    • self:代表当前窗口,主要用于框架;
    • innerWidth:指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏);
    • innerHeight:指浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏);
    window 对象方法
    • alert():弹出一个警告对话框;
    • prompt():弹出一个输入对话框;
    • confirm():弹出一个确认对话框;
    • close():关闭窗口;
    • print():打印窗口;
    • open():打开一个 新的浏览器窗口;
      • 语法:var win = window.open(url,name,options);
      • 说明:参数可有可无。如果没有指定参数,则打开一个选项卡式的窗口(大小是最大化)。
      • 参数:
        • url:准备在新窗口中显示哪个文件;url 可以为空字符串,表示显示一个空的页面。
        • name:新窗口的名字;该名字给 <a> 标记的 target 属性用。
        • options:窗口的规格(属性)。
        • 返回值:返回一个 window 对象的变量,可以通过该名称跟踪窗口。
     
    screen(屏幕对象)
    •  width:屏幕的宽度;(只读属性)
    • height:屏幕的高度;(只读属性)
    • availWidth:屏幕的有效宽度,不包含任务栏;(只读属性)
    • availHeight:屏幕的有效高度,不包含任务栏;(只读属性)
     
    navigator 对象
    • appName:浏览器软件名称,用来判断用户使用的是什么核心的浏览器;
      • 如果是 IE 浏览器的话,返回值为:Microsoft Internet Explorer
      • 如果是 Firefox 浏览器的话,返回值为:Netscape
    • appVersion:浏览器软件的核心版本号;
    • systemLanguage:系统语言;
    • userLanguage:用户语言;
    • platform:平台;
     
    location 地址栏对象
    • href:获取地址栏中完整的地址。可以实现 JS 的网页跳转;
    • host:主机名(域名);
    • hostname:主机名;
    • pathname:文件路径及文件名;
    • search:查询字符串;
    • protocol:协议;
    • hash:锚点名称;如:#top
    • reload(true):刷新网页;true 参数表示强制刷新
    注意:所有的属性,重新赋值后,网页将自动刷新。
     
     
    history 浏览历史对象
    • length:历史记录的个数;
    • go(n):同时可以实现“前进”和“后退”;(n:表示整数)
      • history.go(0)  刷新网页;
      • history.go(-1)  后退;
      • history.go(1)  前进一步;
      • history.go(3)  前进三步;
    • forward():相当于浏览器的“前进”按钮;
    • back():相当于浏览器的“后退”按钮;
     
    延时器
    • setTimeout():设置一个延时器,换句话说:时间一到,就执行 JS 代码一次;
      • 语法:var timer = window.setTimeout(code,millisec);
      • 参数:code 是任何合法的 JS 代码,一般情况下是 JS 函数。该函数要放到引号("code")中;
                              millisec 毫秒值。1秒 = 1000毫秒
      • 返回值:返回一个延时器的 id 变量,这个 id 变量给 clearTimeout() 用来清除。
    • clearTimeout():清除延时器 id 变量;
      • 语法:window.clearTimeout(timer);
      • 参数:timer 就是由 setTimeout() 设置的延时器的 id 变量。
     
    定时器
    • setInterval():设置一个定时器,重复不断的执行 JS 代码(周期性);
      • 语法:var timer = window.setInterval(code,millisec);
    • 参数:code 是任何合法的 JS 代码,一般情况下是 JS 函数。该函数要放到引号("code")中;
                              millisec 毫秒值。1秒 = 1000毫秒
    • 返回值:返回一个延时器的 id 变量,这个 id 变量给 clearInterval() 用来清除。
     
    • clearInterval():清除定时器 id 变量;
      • 语法:window.clearInterval(timer);
      • 参数:timer 就是由 setInterval() 设置的定时器的 id 变量。

        定时器总是调用其他函数,延时器总是调用自己所在的函数。

     
     
    onload 事件:当网页加载完成(指<body>标记的所有内容全部加载完成),才触发该事件(条件)。通过 onload 事件属性,去调用 JS 的函数。onload 属性只有<body>标记才有。
    onclick 事件:当单击时,去调用 JS 代码。所有 HTML 标签都具有该事件属性。
     
     
     
    DOM
    DOM 的分类
    • 核心 DOM:提供了同时操作 HTML 文档和 XML 文档的公共的属性和方法;
    • HTML DOM:针对 HTML 文档提供的专用的属性和方法;
    • XML DOM:针对 XML 文档提供的专用的属性和方法;
    • CSS DOM:提供了操作 CSS 的属性和方法;
    • Event DOM:时间对象模型;如:onclick、onload 等。
     
    DOM 中节点类型
    • document 文档节点:代表整个网页,不代表任何 HTML 标记。但它是 HTML 节点的父节点;
    • element 元素节点:指任何 HTML 标记。每一个 HTML 标记就称一个“元素节点”,他可以有文本节点和属性节点;
    • attribute 属性节点:指 HTML 标记的属性;
    • text 文本节点:是节点书的最底层节点;
     
    节点访问
    • nodeName:节点名称;
    • nodeValue:节点的值。只有文本节点才有值,元素节点没有值;nodeValue 的值只能是“纯文本”,不能含有任何的 HTML 标记或 CSS 属性;
    • firstChild:第1个子节点;
    • lastChild:最后1个子节点;
    • childNodes:子节点列表,是一个数组;
    • parentNode:父节点;
     
    对节点的属性操作
    • setAttribute(name,value):给某个节点添加一个属性;
    • getAttribute(name):获取某个节点属性的值;
    • removeAttribute(name):删除某个节点的属性。
     
    节点的创建
    • document.createElement(tagName):创建一个指定的 HTML 标记(一个节点);
      • tagName:是指不带尖括号的 HTML 标记名称
    • parentNode.appendChild(childNode):将创建的节点,追加到某个父节点下;
      • parentNode:代表父节点,父节点必须存在
      • childNode:代表创建的一个子节点
    • parentNode.removeChild(childNode):删除子节点;
      • parentNode:代表父节点,父节点必须存在
      • childNode:代表要删除的一个子节点
     
    HTML DOM 访问 HTML 元素的方法
    • getElementById():查找网页中指定 id 的元素对象,返回一个元素对象;
      • 语法:var obj = document.getElementById(id)
      • 参数:id 是指网页中标记的 id 属性的值
    • getElementsByTagName(tagName):查找指定的 HTML 标记,返回一个数组;
      • 语法:var arrObj = parentNode.getElementsByTagName(tagName)
      • 参数:tagName 是要查找的标记名称,不带尖括号的
     
    元素对象的属性
    tagName:标签名称,与核心 DOM 中 nodeName 一样;
    className:CSS 类的样式;
    id:同 HTML 标记 id 属性一样;
    title:同 HTML 标记 title 属性一样;
    style:同 HTML 标记 style 属性一样;
    innerHTML:包含 HTML 标记中的所有的内容,包括 HTML  标记;
    offsetWidth:元素对象的宽度(不带 px 单位);
    offsetHeight:元素对象的高度(不带 px 单位);
    scrollWidth:元素对象的总宽度,包括滚动条中的内容(不带 px 单位);
    scrollHeight:元素对象的总高度,包括滚动条中的内容(不带 px 单位);
    scrollTop:指内容向上滚动了多少距离(有滚动条时才有效);
    scrollLeft:指内容向左滚动了多少距离(有滚动条时才有效);
     
     
    Event DOM:事件 DOM
    • 事件简介:主要实现“用户与网页的交互”;当事件发生时,去执行 JS 功能代码。
    • 常用事件:
      • onload:当网页加载完成时;(只能给 <body> 用)
      • onclick:当点击时;
      • onscroll:当拖动滚动条时;
      • onmouseover:当鼠标放上时;
      • onmouseout:当鼠标移开时;
      • onsubmit:当提交表单时;
      • onreset:当重置表单时;
      • onfocus:当获得焦点时(把光标定位到文本框中);
      • onblur:当失去焦点时(把光标从文本框中移开);
      • onchange:当下拉列表内容改变时;(用在下拉列表、上传文件)
      • onselect:当选中文本时;
      • onresize:当改变窗口大小时;
      • . . .  . . . 
    DOM 中 Event 对象属性
    • type:当前的事件类型;
    • clientX 和 clientY:距离窗口左边上边的距离;
    • pageX 和 pageY:距离网页左边上边的距离;
    • screenX 和 screenY:距离屏幕左边上边的距离;
     
    style 对象属性与 CSS 属性的转换
    • 如果是一个单词,style 对象属性与 CSS 属性一样;
    • 如果是多个单词,第一个单词全小写,后面每个单词首字母大写,并去掉中划线。
     
     
    【标记(HTML中的叫法) 】
    【节点(DOM中的叫法)】
    【对象(JS中的叫法)】
  • 相关阅读:
    .netcore利用DI实现级联删除
    识别手写数字增强版100%
    嗨!请查收这道有趣的面试题
    理解TCP/IP协议栈之HTTP2.0
    基于Redis的分布式锁和Redlock算法
    从生日悖论谈哈希碰撞
    Redis面试热点工程架构篇之数据同步
    Redis面试热点之底层实现篇(续)
    saltstack安装+基本命令
    25个iptables常用示例
  • 原文地址:https://www.cnblogs.com/wq-code/p/6631744.html
Copyright © 2011-2022 走看看