前端(六):JavaScript面向对象之宿主对象
宿主对象即浏览器提供的对象,主要包括DOM对象和BOM对象。
一、DOM源起
1.SGML、XML和XHTML
SGML(标准通用标记语言)是定义使用标签来表示数据的标记语言的语法。
- 标签由一个小于号和一个大于号之间的文本组成,如<title>
- 标签分为起始标签和结束标签,分别表示一个特定区域的开始和这个特定区域的结束,如<title>标题</title>
- 特性是定义在起始标签内的值。如<img src="pircutre.jpg">,src就是其特性
HTML遵循SGML标记语言的语法,它是的SGML一种应用。或者说,SGML用来定义HTML的文档类型定义(DTD)。SGML还用来编写XML的DTD。
XML对SGML的语法做了更细致和严谨的扩展。
- SGML的奇怪语法:
- 某些标签不语序出现结束标签,如HTML中的<img>标签,否则会出现错误。
- 某些标签的结束标签可以不写,如HTML中的<p>标签。
- 标签可以以任何顺序嵌套,如<div><span></div></span>。
- 某些特性必须包含值,如<img src="picture.jpg">。
- 某些特性不要求一定有值,如<td nowrap>。
- 定义特性的两边有没有加双引号都是可以的,如<img src=picture.jpg>也是允许的。
- XML去掉了许多SGML中的随意语法,并且规定了新的语法:
- 任何的起始标签都必须有一个结束标签。
- 可以采用另一种简化语法,即一个标签同时表示起始标签和结束标签,即<tag />,如<br />,<hr />。
- 标签必须按合适的顺序嵌套。就近原则书写结束标签。
- 所有的特性都必须有值。
- 所有的特性都必须在值得周围加上双引号。
XML衍生出了MathML、SVG、RDF、RSS等等。同时,HTML被改进为XHML,即遵循XML语法的HTML。XHMTL被称为严格模式。
2.XML的API
XML定义了HTML的数据排版和解析方式。根据XML语言规范,需要制定API来实现对这些数据的操作和访问。
DOM模型就是最为流行的针对XML的基于树的API。它将XML解析为一颗有节点的树模型,并使用一系列互相关联的对象来表示XML的代码。从而能够指导开发增删改查等具体API的实现。
DOM是语言无关的API,它并不与其它语言绑定。但对于JavaScript而言,DOM被习惯理解成API集合。
HTML DOM (文档对象模型)
- 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
- HTML DOM 模型被构造为对象的树。通过 HTML DOM,可访问 HTML 文档的所有元素。
- <html>
<head>
<title>...</title>
...
</head>
<body>
<div>
...
</div>
...
</body>
</html>
- 通过可编程的文档对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。即Javascript可以操作四个内容:元素、属性、样式和事件。html元素、html属性、css样式、事件。html元素、元素属性、元素样式和事件。html元素、html属性、css样式、事件。
- HTML DOM 是浏览器对象BOM的一个属性。
3.DOM node接口和属性访问
DOM定义了树节点(node)的层次和其Node接口,以及这些节点的类型和其数字标号。这些常量会在选择节点之后以属性的方式查询。
接口名称 |
释义 |
属性访问方式 |
数字表示 |
Element |
表示起始标签和结束标签之间的内容。这是唯一可以同时包含特性和子节点的节点类型。 |
Node.ELEMENT_NODE |
1 |
Attr |
代表一对特姓名和特性值。这个节点类型不能包含子节点。 |
Node.ATTRIBUTE_NODE |
2 |
Text |
代表XML文档中的在其实标签和结束标签之间的,或者CData Seciron内的普通文本。这个节点类型不能包含子节点。 |
Node.TEXT_NODE |
3 |
CDataSection |
<![CDATA[]]>的对象表现形式。这个几点类型仅能包含文本节点Text作为子节点。 |
Node.CDATA_SECTION_NODE |
4 |
Entity |
表示在DTD中的一个实体定义,例如<!ENTITY foo "foo">。这个节点类型不能包含子节点。 |
Node.ENTITY_NODE |
5 |
EntityReference |
代表一个实体引用,例如"。这个节点类型不能包含子节点。 |
Node.ENTITY_REFERENCE_NODE |
6 |
ProcessingInstruction |
代表一个PI。这个节点类型不能包含子节点。 |
Node.PROCESSING_INSTRUCTION_NODE |
7 |
Comment |
代表XML注释。这个节点类型不能包含子节点。 |
Node.COMMENT_NODE |
8 |
Document |
代表在DTD中定义的记号。这个很少用到。 |
Node.DOCUMENT_NODE |
9 |
DocumentType | 最顶层的节点,所有的其它节点都是附属于它的。 | Node.DOCUMENT_TYOE_NODE | 10 |
DoucmentR=Frament | DTD引用(使用<!DOCTYPE>),如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。它不能包含子节点。 | Node.DOCUMENT_FRAMENT_NODE | 11 |
Notation |
可以像Document一样来保存其它节点。 |
Node.NOTATION_NODE |
12 |
4.节点特性和方法
Node接口定义了所有节点类型都包含的特性和方法。
特性/方法 | 类型/返回类型 | 说明 |
nodeName | String | 节点的名字 |
nodeValue | String | 节点的值 |
nodeType | Number | 节点的类型常量值 |
ownerDocument | Document | 节点的所属文档 |
childNodes | NodeList | 节点的所有子节点列表 |
firstChild | Node | 子节点列表的第一个节点 |
lastChild | Node | 子节点列表的最后一个节点 |
hasChildNodes() | Boolean | 是否包含子节点 |
appendChild(node) | Node | 将node添加到childNodes末尾 |
removeChild(node) | Node | 从childNodes中删除node |
replaceChild(newnode,oldnode) | Node | 将childNodes中的oldnode替换成newnode |
insertBefore(newnode, refnode) | Node | 在childNodes中的refnode之前插入newnode |
previousSibling | Node | 指向前一个兄弟节点,如果这个节点就是第一个兄弟节点,那么该值为null |
nextSibling | Node | 指向后一个兄弟节点,如果这个节点就是最后一个兄弟节点,那么该值为null |
attributes | NamedNodeMap | 包含了代表一个元素的特性的Attr对象,仅用于Element节点 |
5.HTML DOM
任何基于XML的语言,如XHTML和SVG,因为它们遵循XML语法,所以可以使用上述的Node接口操作。然而很多语言会继续定义它们自己的DOM来扩展XML以提供特定功能。
开发XML DOM的同时,W3C还一起开发了针对XHTML(以及HTML)的DOM。这个DOM定义了一个HTMLDocument一个HTMLElement作为实现基础。
每个HTML元素通过Ω它自己的HTMLElement类型表示,如HTMLDivElement代表了<div>元素。但有少数的除外。
二、DOM通用节点对象操作
1.DOM的通用属性
alinkColor |
激活的链接的颜色,如<body alink="color">定义的。 |
bgColor |
页面的背景颜色,如<body bgcolor="color">定义的。 |
fgColor |
页面的文本颜色,如<body text="color">定义的。 |
lastModified |
最后修改页面的日期,是字符串。 |
linkColor |
链接的颜色,如<body link="color">定义的 |
referrer |
浏览器当前页后退一个位置的url |
title |
<title>标签中显示的文本 |
URL |
当前页面的url |
vlinkColor |
访问过的链接的颜色,如<body vlink="color">定义的 |
* 这些属性是引用了<body>标签中的旧HTML特性,应该用样式表代替它们。 |
2.DOM的通用集合
ahchors |
页面中所有锚的集合(由<a name="ahchorname></a>标签表示)。 |
applets |
页面中所有applet的集合。 |
embeds |
页面中所有嵌入式对象的集合(由<embed>标签表示) |
forms |
页面中所有表单的集合。 |
images |
页面中所有图像的集合。 |
links |
页面中所有链接的集合(由<a href="somewhere.htm"><a>表示。 |
3.DOM通用节点操作
document对象是BOM的一部分,同时也是HTML DOM的HTMLDocument对象的表现形式,即它也是XML DOM Document对象。
1查找节点
document[Element].getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document[Element].getElementsByName() | 返回带有指定名称的对象集合。 |
document[Element].getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document[Element].getElementsByClassName() | 返回带有指定类名的对象集合。 |
2创建节点
document.createAttribute(name) |
创建属性名为name的属性节点。 |
document.createElement() |
创建标签名为tagName的元素。 |
document.createTextNode(text) |
创建包含文本text的文本节点。 |
* 创建其它Node接口定义的节点没有太大用处。因为被更简便的操作替代。 |
3添加节点
Element.appendChild(Node) |
添加Node子元素。 |
Element.insertBefore(newNode, oldNode) |
在某个子节点对象前添加新节点。 |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>节点选取</title>
<style type="text/css">
.outer {
width: 200px;
background-color: yellow;
}
.inner{
float: left;
height: 50px;
width: 50px;
}
.inner:first-child{
background-color: red;
}
.inner:last-child{
background-color: blue;
}
.header, .bottom{
height: 50px;
width: 200px;
background-color: green;
}
.clearfix:before, .clearfix:after{
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="outer clearfix">
</div>
<div class="bottom"></div>
<script> function newDiv() {}
newDiv.create = newDiv.prototype.create = function (className) {
var oDiv = document.createElement("div");
// 第一种方式
/*
var oText = document.createTextNode("第一个子div");
oDiv.appendChild(oText);
var oAttr = document.createAttribute("class");
oAttr.nodeValue = className;
oDiv.setAttributeNode(oAttr);
*/
// 第二种方式
oDiv.innerHTML = "第二个子div";
oDiv.setAttribute("class", className);
return oDiv;
};
var oDiv = new newDiv();
var oDivFather = document.getElementsByClassName("outer")[0]
oDivFather.appendChild(oDiv.create("inner"));
oDivFather.appendChild(oDiv.create("inner"));
</script>
</body>
</html>
样例代码
4删除节点
Element.removeChild(Node) 删除Node子元素。
5替换节点
Element.replacChild(newNode, oldNode) 替换子元素。
6.节点属性和方法
节点属性和方法包含DOM NOde接口定义的所有属性和方法。HTML DOM 还包括其它的一些属性和方法。详细参见http://www.w3school.com.cn/jsref/dom_obj_all.asp。
Element.tagName |
返回元素的标签名。 |
Element.cloneNode() |
复制当前元素。 |
Element.normalize() |
合并元素中相邻的文本节点,并移除空的文本节点。 |
Element.parentNode |
返回元素的父节点。 |
Element.ownerDocument |
返回元素的根元素(文档对象)。 |
nodelist.item() |
返回 NodeList 中位于指定下标的节点。 |
nodelist.length |
返回 NodeList 中的节点数。 |
Element.toString() |
把元素转换为字符串。 |
4.DOM通用属性操作
1.查找属性
Element.hasAttribute() |
如果元素拥有指定属性,则返回true,否则返回 false。 |
Element.hasAttributes() |
如果元素拥有属性,则返回 true,否则返回 false。 |
2.获取属性
Element.getAttribute() |
返回元素节点的指定属性值。 |
Element.getAttributeNode() |
返回指定的属性节点。 |
3.设置属性
Element.setAttribute() |
把指定属性设置或更改为指定值。 |
Element.setAttributeNode() |
设置或更改指定属性节点。 |
4.删除属性
Element.removeAttribute() |
从元素中移除指定属性。 |
Element.removeAttributeNode() |
移除指定的属性节点,并返回被移除的节点。 |
5.getattr和setattr获取或设置属性
除了hasAttribute、getAttributes、setAttributes、removeAttribute操作属性,一些属性也可以通过节点.属性的方式获取/设置属性。
Element.id |
设置或返回元素的 id。 |
Element.style |
设置或返回元素的 style 属性。 |
Element.innerHTML |
设置或返回元素的内容。 |
Element.className |
设置或返回元素的 class 属性。 |
Element.title |
设置或返回元素的 title 属性。 |
Element.textContent |
设置或返回节点及其后代的文本内容。 |
Element.contentEditable |
设置或返回元素的文本方向。 |
Element.dir |
设置或返回元素的内容是否可编辑。 |
Element.accessKey |
设置或返回元素的快捷键。 |
Element.lang |
设置或返回元素的语言代码。 |
Element.namespaceURI |
返回元素的 namespace URI。 |
Element.tabIndex |
设置或返回元素的 tab 键控制次序。 |
特别提醒:可以通过Element.style.属性实现对头部或者外链的css样式进行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
.outer{
width: 400px;
margin: 0 auto;
}
.inner-first{
overflow: hidden;
background-color: green;
}
.inner-first .child{
float: left;
height: 100px;
width: 100px;
margin: 0 16px;
line-height: 100px;
text-align: center;
}
.clearfix:before, .clearfix:after{
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.inner-second{
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner-first clearfix">
<a class="child">第一个</a>
<a class="child">第二个</a>
<a class="child">第三个</a>
</div>
<div class="inner-second"></div>
</div> <script>
function Click() {}
Click.create = Click.prototype.create = function (className) {
var oA = document.getElementsByClassName(className);
for(var i in oA){
oA[i].onclick = function () {
console.log(this);
this.style.backgroundColor = "red"; // 通过Element.style.属性来设置style内部样式
return false;
}
}
};
var oClick = new Click();
oClick.create("child");
</script>
</body>
</html>
样例代码
设置距离、偏移和可见宽高。
Element.clientHeight |
返回元素的可见高度。 |
Element.clientWidth |
返回元素的可见宽度。 |
Element.offsetWidth |
返回元素的宽度。 |
Element.offsetLeft |
返回元素的水平偏移位置。 |
Element.offsetParent |
返回元素的偏移容器。 |
Element.offsetTop |
返回元素的垂直偏移位置。 |
Element.scrollHeight |
返回元素的整体高度。 |
Element.scrollLeft |
返回元素左边缘与视图之间的距离。 |
Element.scrollTop |
返回元素上边缘与视图之间的距离。 |
Element.scrollWidth |
返回元素的整体宽度。 |
6.检查元素
Element.isContentEditable |
设置或返回元素的内容。 |
Element.isDefaultNamespace() |
如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。 |
Element.isEqualNode() |
检查两个元素是否相等。 |
Element.isSameNode() |
检查两个元素是否是相同的节点。 |
Element.compareDocumentPosition() |
比较两个元素的文档位置。 |
Element.isSupported() |
如果元素支持指定特性,则返回 true。 |
三、DOM节点的特殊属性和方法
本节内容摘自JavaScript使用手册。
1.form表单
1.使用方式
文件对象的子对象,Javascript的runtime engine自动为每一个表单建立一个表单对象。
格式:
- document.forms[索引].属性
- document.forms[索引].方法(参数)
- document.表单名称.属性
- document.表单名称.方法(参数)
2.form属性
action | 表单动作 |
elements | 以索引表示的所有表单元素 |
encoding | MIME的类型 |
length | 表单元素的个数 |
method | 方法 |
name | 表单名称 |
target | 目标 |
3.form方法
handleEvent(事件) | 使事件处理程序生效 |
reset() | 重置 |
submit() | 提交 |
4.form子元素共有的属性和方法
form子元素共有的属性:
form | 该对象所在的表单 |
name | 该对象的name属性 |
type | 该对象的type属性 |
value | 该对象的value属性 |
form子元素共有的方法:事件。
带有"checked"属性的子元素:单选按钮、复选框。
2.a对象
网页中的链接均会被自动看作链接对象,可以通过document.links访问。它是一个当前页面的所有a链接的集合。
1.a属性
href | 完整的URL字串 |
host | 主机域名或IP地址 |
hostname | URL中的host+port |
port | URL中端口部分 |
hash | URL中的锚点名称 |
protocol | URL中通讯协议部分 |
pathname | URL中path部分 |
search | URL中查询字串部分 |
target | 代表目标的窗口 |
text | 表示A标签中的文字 |
x | 链接对象的左边界 |
y | 链接对象的右边界 |
2.a方法:事件。
3.Cookie对象
是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据)。Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取。
1.写入Cookie
document.cookie = " 关键字 = 值 [ ; expires = 有效日期 ] [;...]"
备注:
- 有效日期格式:Wdy,DD-Mon-YY HH:MM:SS GMT;
- Wdy / Mon:英文星期 / 月份;
- 还包含path、domain、secure属性;
- 每个Web站点(domain)可建立20个Cookie数据;
- 每个浏览器可存储300个Cookie数据,4k字节;
- 客户有权禁止Cookie数据的写入。
<Script>
var today = new Date();
var expireDay = new Date();
var msPerMonth = 24*60*60*1000*31;
expireDay.setTime( today.getTime() + msPerMonth ); document.cookie = "name=Hubert;expires=" + expireDay.toGMTString();
document.write("已经将 Cookie 写入你的硬盘中了!<br>");
document.write("内容是:", document.cookie, "<br>");
document.write("这个 Cookie 的有效时间是:");
document.write(expireDay.toGMTString());
</Script>
样例代码
2.读取Cookie
document.cookie
3.删除Cookie
document.cookie = " 关键字 = ; expires = 当前日期"
3.总结
W3C在开发XML DOM的同时,还开发了针对XHTML的DOM。该DOM定义了两个基类:HTMLDocument和HTMLElement。
实际上,每一类型的元素(节点)都是HTMLElement的子类,如Div元素是由HTMLDivElement对象来定义的,每个具体的div元素标签是该类元素对象的实例化对象。
因而,我们可以通过对象.属性和对象.方法来操作每类元素。
这也是js中一切皆对象的核心所在。它对标记语言的对象建模显得比后端业务逻辑建模更加简单、直白、明了。
前端(六):JavaScript面向对象之宿主对象的更多相关文章
- 重学前端--js是面向对象还是基于对象?
重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...
- 前端(五):JavaScript面向对象之内建对象
一.数据类型 js中数据类型分为两种,原始数据累次能够和引用数据类型. 1.原始数据类型 Undefined.Null.Boolean.Number.String是js中五种原始数据类型(primit ...
- 前端(四):JavaScript面向对象之自定义对象
一.对象 1.字面量创建对象 var person = { name: "sun", age: 18, work: function () { console.log(this.n ...
- JavaScript 面向对象编程 · 理解对象
前言: 在我们深入 面向对象编程之前 ,让我们先理解一下Javascript的 对象(Object),我们可以把ECMAScript对象想象成散列表,其值无非就是一组名值对,其中值可以是数据 ...
- JavaScript面向对象之Windows对象
JavaScript之Window对象 首先我们先了解一个概念:事件. 事件,就是把一段代码设置好,满足条件时触发.或者说,事件是可以被 JavaScript 侦测到的行为. 网页中每个元素都可以触发 ...
- javascript面向对象(给对象添加属性和方法的方式)
1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法 var g ...
- JavaScript 面向对象之原型对象
原型的概述 我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法. 逻辑上可以这么理解:prototype 通过调用构 ...
- 【从0到1学Web前端】javascript中的ajax对象(一) 分类: JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏
现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看 ...
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
随机推荐
- Dive into Spring framework -- 了解基本原理(二)--设计模式-part1
比较巧,自己在接触设计模式的时候,也刚开始学习spring,但可惜的是,真的仅仅在学习“用”spring,每天都沉浸在会痛快的完成spring各种配置的快乐之中,但对成长无用.其实当初就清楚,spri ...
- 推荐给开发者的11个PHP框架(转)
PHP框架对于Web开发者来说是非常有用的工具,它可以帮助使用者更快.更容易的完成项目.根据调查,PHP仍是Web开发中最受欢迎和最实用的平台之一.当谈及Web开发时,很多人依然会选择使用PHP框架, ...
- js中的内部属性与delete操作符
本文正式地址:http://www.xiabingbao.com/javascript/2015/08/03/javascript-delete-configurable 在讲解Configurabl ...
- ubuntu 16.04 配置远程连接
1.XDMCP远程连接 vi /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 添加 greeter-show-manual-login=true [X ...
- Spring Boot配置ContextPath【从零开始学Spring Boot】
Spring boot默认是/ ,这样直接通过http://ip:port/就可以访问到index页面,如果要修改为http://ip:port/path/ 访问的话,那么需要在Application ...
- linux下网卡配置vlan
yum install vconfig -y modprobe 8021qvconfig add eth0 900 ifconfig eth0.900 172.16.90.57/24 up ...
- field字段错位手动更改方法
update tbprotocolex set field='1' where name='ICMP';update tbprotocolex set field='1' where name='DN ...
- jersey实现跨服务器上传
1.导入跨服务器上传文件jar文件 <dependency> <groupId>commons-io</groupId> <artifactId>com ...
- java程序设计基础篇 复习笔记 第七单元&&第八单元
7.1 int[][] triArray{ {1}, {1,2}, {1,2,3}, }; 7.2 array[2].length 8.1 Unified Modeling Language:UML ...
- 基于IDEA和Maven的SSM分层项目搭建
前言 虽然现在SpringBoot开始流行,但是SSM作为一个经典框架,还是有必要去了解一下. 项目建立 1.新建一个空白的Maven项目,如下图.然后把IDEA自动生成的多余src目录删掉. 2.右 ...