锐客网

  1. 首页 > it技术 > >

HTML+CSS+JavaScript知识点整理3

【HTML+CSS+JavaScript知识点整理3】BOM和DOM简介

BOM，Browser Object Model ,浏览器对象模型。 BOM主要提供了访问和操作浏览器各组件的方式。 浏览器组件： window(浏览器窗口) location(地址栏) history(浏览历史) screen(显示器屏幕) navigator(浏览器软件) document(网页) DOM，Document Object Model，文档对象模型。 DOM主要提供了访问和操作HTML标记的方式。 HTML标记： 图片标记 表格标记 表单标记 body、html标记 …… BOM和DOM不是JS的内容。它们是W3C制定的规范。但是，BOM和DOM在浏览器中以对象的形式得以实现。 换句话说：BOM和DOM都是由一组对象构成。 W3C是制作互联网标准的一个国际化的组织，如：XHTML、CSS、JavaScript、AJAX等。BOM对象结构图各对象之间是有层级关系的，那么各对象之间如何访问呢？ window.document.write(“OK”) window.document.body.bgColor = “#FF0000”; window对象是所有其它对象的最顶层对象，因此，可以省略。 document.write(“OK”); document.body.bgColor = “#FF0000”; window.alert(“OK”); ——>alert(“OK”); window.prompt(“请输入一个分数”)； ——>prompt(“请输入一个分数”);

  • Window对象属性和方法
name：指浏览器窗口的名字或框架的名字。这个名字是给标记的target属性来用的。 设置窗口的名字：window.name = “newWin” 获取窗口的名字：document.write(name); top：代表最顶层窗口。如：window.top parent：代表父级窗口，主要用于框架。 self：代表当前窗口，主要用于框架中。 innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。 在IE下，使用 document.documentElement.clientWidth 来代替 window.innerWidth innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。 在IE下，使用document.documentElement.clientHeight 来代替window.innerHeight document.documentElement就是标记对象 document.body就是 标记对象window对象方法 alert()：弹出一个警告对话框。 prompt()：弹出一个输入对话框。 confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。 close()：关闭窗口 print()：打印窗口open()方法 功能：打开一个新的浏览器窗口。 语法：var winObj = window.open([url][,name][,options]); 说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口(大小是最大大化)。 参数： url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。 name：新窗口的名字，该名字给标记的target属性来用。 options：窗口的规格。 width：新窗口的宽度 height：新窗口的高度 left：新窗口距离屏幕左边的距离 top：新窗口距离屏幕上边的距离 menubar：是否显示菜单栏，取值：yes、no toolbar：是否显示工具栏。 location：是否显示地址栏。 status：是否显示状态栏。 scrollbars：是否显示滚动条，不能省略s字母。 返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。onload事件：当网页加载完成，指标记的所有内容全部加载完成，才触发该事件(条件)。通过onload事件属性，去调用JS的函数。onload属性只有标记才有。 onclick事件：当单击时，去调用JS代码。所有HTML标记都具有该事件属性。

  • 延时器方法——setTimeout()
setTimeout() 功能：设置一个延时器，换句话说：时间一到，就执行JS代码一次。 语法：var timer = window.setTimeout(code,millisec) 参数： ?code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。 举例：window.setTimeout(“close()” , 2000) 举例：window.setTimeout(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。 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函数。该函数要放在引号中。 举例：window.setInterval(“init()” , 2000) 举例：window.setInterval(init, 2000); //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。 millisec：毫秒值。1秒=1000毫秒 返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除。 clearInterval() 功能：清除定时器id变量 语法：window.clearInterval(timer) 参数：timer就是由setInterval()设置的定时器的id变量。

  • screen屏幕对象
Width：屏幕的宽度，只读属性。 Height：屏幕的高度，只读属性。 availWidth：屏幕的有效宽度，不含任务栏。只读属性。 availHeight：屏幕的有效高度，不含任务栏。只读属性。

  • navigator对象
appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。 如果是IE浏览器的话，返回值为：Microsoft Internet Explorer 如果是Firefox浏览器的话，返回值为：Netscape appVersion：浏览器软件的核心版本号。 systemLanguage：系统语言 userLanguage：用户语言 platform：平台

  • location 地址栏对象
href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = https://www.it610.com/article/“http://www.sina.com.cn”; host：主机名 hostname：主机名 pathname：文件路径及文件名 search：查询字符串。protocol：协议，如：http://、ftp:// hash：锚点名称。如：#top reload([true])：刷新网页。true参数表示强制刷新 注意：所有的属性，重新赋值后，网页将自动刷新。

history对象
length：历史记录的个数 go(n)：同时可以实现“前进”和“后退。” i.history.go(0)刷新网页 ii. history.go(-1)后退 iii.history.go(1)前进一步 iv. history.go(3)前进三步 forward()：相当于浏览器的“前进”按钮 back()：相当于浏览器的“后退”按钮

  • DOM
DOM ， Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。 DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。 DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。 DOM的分类 核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。 HTML DOM：针对HTML文档提供的专用的属性方法。 XML DOM：针对XML文档提供的专用的属性和方法。(就业班讲) CSS DOM：提供了操作CSS的属性和方法。 Event DOM：事件对象模型。如：onclick、 onload等。HTML节点树节点关系 根节点，一个HTML文档只有一个根，它就是HTML节点。 子节点：某一个节点的下级节点。 父节点：某一个节点的上级节点。 兄弟节点：两个子节点同属于一个父节点。DOM中节点类型 document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点。 element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。 attribute属性节点。指HTML标记的属性。 text节点。是节点树的最底节点。核心DOM中的公共的属性和方法 提示：核心DOM中查找节点(标记)，都是从根节点开始的(html节点)。 1、节点访问 nodeName：节点名称。 nodeValue：节点的值。只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何的HTML标记或CSS属性。 firstChild：第1个子节点。 lastChild：最后1个子节点。 childNodes：子节点列表，是一个数组。 parentNode：父节点。查找标记的方法 document.firstChild document.documentElement 查找标记的方法 document.firstChild.lastChild document.body为什么，document.body.firstChild 找不到节点？ 核心DOM的属性和方法，主要是针对HTML4.0开发的。 在Firefox下，会把空格或换行，当成文本节点。 HTML4.0是有没有DTD类型定义的。2、对节点的属性操作 setAttribute(name,value)：给某个节点添加一个属性。 getAttribute(name)：获取某个节点属性的值。 removeAttribute(name)：删除某个节点的属性。3、节点的创建 document.createElement(tagName)：创建一个指定的HTML标记，一个节点 tagName：是指不带尖括号的HTML标记名称。 举例：var imgObj = document.createElement(“img”) parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。 parentNode代表父节点，父节点必须存在。 childNode代表子节点。 举例：document.body.appendChild(imgObj) parentNode.removeChild(childNode)：删除某个父节点下的子节点。 parentNode代表父节点。 childNode代表要删除的子节点。 举例：document.body.removeChild(imgObj)
  • HTML DOM简介和新特性
1、简介 核心DOM中，提供的属性和方法，已经可以操作网页了。为什么还要有HTMLDOM呢？ 如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分麻烦。 那么，HTMLDOM中就提供了通过id直接找节点的方法，而不用再HTML根节点开始。 2、HTML DOM的新特性 每一个HTML标记，都对应一个元素对象。如：HTML+CSS+JavaScript知识点整理3
文章图片
表单中新增的属性 Autocomplete：自动完成，取值：on、off Autofocus：自动获得焦点 表单input元素type属性的值 tel：电话验证 Email：邮箱验证 url：网址验证 color：颜色拾色器 date：日历 month：选择月份 time：时间 datetime：日期时间

    推荐阅读


    上一篇：明证身世郑凤兰百感交集【三】

    下一篇：坚定而坚定---“妈妈，拿吃的！”