首页 > js教程 > 正文

对js中宿主对象的解析

原创 2018-07-14 16:26:46 0 596
这篇文章主要介绍了关于对js中宿主对象的解析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 

宿主对象即浏览器提供的对象,主要包括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>标签。
    - 标签可以以任何顺序嵌套,如<p><span></p></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>
<p>
...
</p>
...
</body>
</html>
  - 通过可编程的文档对象模型,JavaScript 获得了足够的能力来创建动态的 HTML
  - JavaScript 能够改变页面中的所有 HTML 元素
  - JavaScript 能够改变页面中的所有 HTML 属性
  - JavaScript 能够改变页面中的所有 CSS 样式
  - JavaScript 能够对页面中的所有事件做出反应
  - 即Javascript可以操作四个内容:,html元素、html属性、css样式、事件。
  - HTML DOM 是浏览器对象BOM的一个属性

  3.DOM节点层次

DOM定义了树节点(node)的层次和其Node接口:
  - Document 最顶层的节点,所有的其它节点都是附属于它的。
  - DocumentType      DTD引用(使用<!DOCTYPE>),如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。它不能包含子节点。
  - DocumentFragment    可以像Document一样来保存其它节点。
  - Element         表示起始标签和结束标签之间的内容。这是唯一可以同时包含特性和子节点的节点类型。
  - Attr           代表一对特姓名和特性值。这个节点类型不能包含子节点。
  - Text           代表XML文档中的在其实标签和结束标签之间的,或者CData Seciron内的普通文本。这个节点类型不能包含子节点。
  - CDataSection      <![CDATA[]]>的对象表现形式。这个几点类型仅能包含文本节点Text作为子节点。
  - Entity          表示在DTD中的一个实体定义,例如<!ENTITY foo "foo">。这个节点类型不能包含子节点。
  - EntityReference    代表一个实体引用,例如&quot;。这个节点类型不能包含子节点。
  - ProcessingInstruction 代表一个PI。这个节点类型不能包含子节点。
  - Comment         代表XML注释。这个节点类型不能包含子节点。
  - Notation        代表在DTD中定义的记号。这个很少用到。

  4.节点类型常量

Node接口还定义了不同节点类型的12个常量:
  - Document         -       Node.DOCUMENT_NODE
  - DocumentType      -       Node.DOCUMENT_TYOE_NODE
  - DoucmentR=Frament   -       Node.DOCUMENT_FRAMENT_NODE
  - Element         -       Node.ELEMENT_NODE
  - Attr           -      Node.ATTRIBUTE_NODE
  - Text           -      Node.TEXT_NODE
  - CDataSection      -       Node.CDATA_SECTION_NODE
  - Entity          -       Node.ENTITY_NODE
  - EntityReference    -       Node.ENTITY_REFERENCE_NODE
  - ProcessingInstruction -       Node.PROCESSING_INSTRUCTION_NODE
  - Comment         -       Node.COMMENT_NODE
  - Notation         -      Node.NOTATION_NODE
* 这些常量会在选择节点之后以属性的方式查询

  4.节点类型常量

Node接口还定义了不同节点类型的12个常量:
  - Document         -       Node.DOCUMENT_NODE(9)
  - DocumentType      -       Node.DOCUMENT_TYOE_NODE(10)
  - DoucmentR=Frament   -       Node.DOCUMENT_FRAMENT_NODE(11)
  - Element         -       Node.ELEMENT_NODE(1)
  - Attr           -       Node.ATTRIBUTE_NODE(2)
  - Text           -       Node.TEXT_NODE(3)
  - CDataSection      -       Node.CDATA_SECTION_NODE(4)
  - Entity          -       Node.ENTITY_NODE(5)
  - EntityReference    -       Node.ENTITY_REFERENCE_NODE(6)
  - ProcessingInstruction -       Node.PROCESSING_INSTRUCTION_NODE(7)
  - Comment         -       Node.COMMENT_NODE(8)
  - Notation         -       Node.NOTATION_NODE(12)
* 这些常量会在选择节点之后以属性的方式查询

  5.节点特性和方法

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节点

  6.HTML DOM

任何基于XML的语言,如XHTML和SVG,因为它们遵循XML语法,所以可以使用上述的Node接口操作。然而很多语言会继续定义它们自己的DOM来扩展XML以提供特定功能。
开发XML DOM的同时,W3C还一起开发了针对XHTML(以及HTML)的DOM。这个DOM定义了一个HTMLDocument一个HTMLElement作为实现基础。每个HTML元素通过它自己的HTMLElement类型表示,如HTMLpElement代表了<p>元素。但有少数的除外。

二、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.getElementById()         返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
document.getElementsByClassName() 返回带有指定类名的对象集合。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>document操作元素</title></head><body>
    <p class="outer">
        <p class="inner">第一段文本</p>
        <p class="inner">第二段文本</p>
    </p>
    <script>
        var op = document.getElementsByClassName("outer")[0].getElementsByClassName("inner")[0].innerHTML;    
        </script></body></html>

  2创建节点

document.createAttribute(name)    创建属性名为name的属性节点。
document.createElement() 创建标签名为tagName的元素。
document.createTextNode(text)   创建包含文本text的文本节点。
* 创建其它Node接口定义的节点没有太大用处。因为被更简便的操作替代。

  3添加节点

Element.appendChild(Node)          添加Node子元素。
Element.insertBefore(newNode, oldNode) 在某个子节点对象前添加新节点。

  4删除节点

Element.removeChild(Node)          删除Node子元素。

  5替换节点

Element.replacChild(newNode, oldNode)   替换子元素。
document.getElementById()          返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()  返回带有指定名称的对象集合。
document.getElementsByTagName()  返回带有指定标签名的对象集合。
document.getElementsByClassName()  返回带有指定类名的对象集合。

  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.attributes          返回元素属性的 NamedNodeMap
El
ement.hasAttribute()         如果元素拥有指定属性,则返回true,否则返回 false
Element.hasAttributes()     如果元素拥有属性,则返回 true,否则返回 fals

  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.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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

js中自定义对象的解析

对js的内建对象的解析

以上就是对js中宿主对象的解析的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    条评论

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 昧光

      全栈工程师

    • 认证0级讲师
    • 5318篇
      文章总数
    • 596
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新