DOM与BOM部分示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM and BOM</title>
</head>
<body>
    <div>此为DOM的部分示例(用id和标签寻找html的元素):</div>
    <p id="intro">Hello World!</p>

<p>The DOM is very useful.</p>
    <p id="p1">这是原来的句子</p>
    <p>以下例子是用id来寻找元素:</p>
    <p id="demo"></p>
    <p>以下例子是用标签名称来寻找元素:</p>
    <p id="demo1"></p>
    <div>此为BOM的部分示例(获取当前浏览器窗口的长和宽、获取当前的网站地址):</div>
    <p id="demo2"></p>
    <div>以下展示当前的网站地址:</div>
     <p id="demo3"></p>
    <script>
        var myElement = document.getElementById("intro");
        document.getElementById("demo").innerHTML =
        "The text from the intro paragraph is: " + myElement.innerHTML;
        var x = document.getElementsByTagName("p");
        document.getElementById("demo1").innerHTML =
        ‘The second paragraph (index 1) is: ‘ + x[1].innerHTML;
        document.getElementById("p1").innerHTML = "本句是用js更改后的句子";
        var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;

var x = document.getElementById("demo2");
        x.innerHTML = "当前浏览器的宽为:" + w + ", 高为:" + h + "。";

document.getElementById("demo3").innerHTML = "当前网址为:" + window.location.href;
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/superyucong/p/9825087.html

时间: 2024-11-01 20:28:58

DOM与BOM部分示例的相关文章

JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param+"<br/>"); } function print(param){ document.write(param); } window对象中的方式: 方法: confirm : bConfirmed = window.confirm( [sMessage]) 显示一个确认对话框

javascript、ECMAScript、DOM、BOM关系

ECMAScript,正式名称为 ECMA 262 和 ISO/IEC 16262,是宿主环境中脚本语言的国际 Web 标准. ECMAScript 规范定义了一种脚本语言实现应该包含的内容:但是,因为它是可扩充的,所以其实现所提供的功能与这个最小集相比可能变化很大. ECMAScript 是一种开放的.国际上广为接受的脚本语言规范. 它本身并不是一种脚本语言.正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一

Javascript Vs DOM Vs BOM

当前想法有些乱,整理不下去了... 以后如果想起来,再继续整理.... 1.Javascript的组成部分 Javascript的内容分成三个部分:ECMAScript.DOM和BOM. 浏览器,可以看成是ECMAScript运行的宿主环境,然而并不是唯一的宿主环境. The BOM consists of the objects navigator, history, screen, location and document which are children of window. In

javascript与ECMAScript、DOM、BOM的关系

在初学javascript时,经常会看见javascript dom.ECMAScript等名词,一直不明白,今天查阅了一些资料和评论,简单写一下. JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象: DOM 描述了处理网页内容的方法和接口: BOM 描述了与浏览器进行交互的方法和接口. ECMAScript 先简单了解javascript的发展历史,在因特网发展的初期,为了减少客户端与服务器的交互(比如表单的验证一类),提高网上冲浪的效率,当时著名的Netsca

JAVAScript中DOM与BOM的差异分析

JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 W3C 的标准; [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BO

DOM与bom

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口.,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口.我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准 2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别

ECMAscript,DOM,BOM哪个比较重要

ECMA > DOM > BOM ECMA是JS的核心,语法.变量.对象.各种对象的API.作用域.原型链.闭包.This指向.构造函数等等必须要熟练,有了这些基础你才能去熟练的操作DOM.BOM DOM顾名思义是操作DOM元素,用JS获取.控制DOM元素的一些属性 BOM就是操作浏览器相关的东西,如获取设备信息.屏幕信息.地址栏信息等 JS就是由这三个模块构成,脑海里要有这个场景,他们的构成! 原文地址:https://www.cnblogs.com/xywl/p/10325366.html

DOM和BOM的理解

一.DOM DOM 全称是 Document Object Model,也就是文档对象模型. 个人理解,DOM包含三层意思:1.DOM是一个操作HTML的API接口  2.DOM是一个HTML结构模型  3.DOM代指该HTML模型中的对象 1.DOM是一个操作HTML的API接口 HTML本身是静态的,是不变的,每个标签的内容以及属性都是死的. 如果要让网页动起来,就要完成两步:第一步是思维上的转变(网页是可以动起来的),第二部是操作上的突破(如何动起来) DOM完成了上述两步,它首先在板结的

JS中的DOM与BOM

javascript组成: 1. ECMAScript 基本语法. 2. BOM (浏览器对象模型) 3. DOM (文档对象模型) 一)BOM(borwser Object  Model) 浏览器对象模型:使用对象描述了浏览器的各个部分的内容. 1)window :当前的窗口 window常用的方法: open()   打开一个新的资源. moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置. moveBy()  相对于当前的窗口移动指定的 x 和 y 偏移值(左上角). s