1、Window.history：window.open打开网页的方式必须是_self

window.history.back()后退

Window.history.forward()前进

<body>

        <input type="button" value="打开窗口" onclick="Dk()"  />

        <input type="button" value="前进" onclick="Qian()" />

 </body>

    <script type="text/javascript">

		function Dk()

		{

			window.open("Untitled-2.html","_self","width=300 height=300");

		}

		function Qian()

		{

			window.history.forward();

		}

Window.history.go(n)；n为正数就是前进几个页面，为负数就是后退几个页面。

<body>

        <input type="button" value="打开窗口" onclick="Dk()"  />

        <input type="button" value="前进" onclick="Qian()" />

 </body>

    <script type="text/javascript">

		function Dk()

		{

			window.open("Untitled-2.html","_self","width=300 height=300");

		}

		function Qian()

		{

			window.history.go(1);

		}

2、window.document

查找元素

根据id查找    var  d1 = document.getElementById("d1");

根据class查找  var d2 = document.getElementsByClassName("d2");找到的是数组

.根据标签名找  var d3 = document.getElementsByTagName("div");找到的是数组

表单元素  var d4 = document.getElementsByName("aa") 找到的是数组

3、操作
        1.操作内容 var d1 = document.getElementById("d1");

获取内容

alert(d1.innerText);
        alert(d1.innerHTML);
        修改内容
        d1.innerHTML = "<b>修改</b>";

    <body>

        <div id="d1" style="width:100px; height:100px;">你好</div>

    </body>

	   <script type="text/javascript">

		   var b=document.getElementById("d1")

		   b.innerHTML="<b>修改</b>"

       </script>

d1.innerText = "修改";

    <body>

        <div id="d1" style="width:100px; height:100px;">你好</div>

    </body>

	   <script type="text/javascript">

		   var b=document.getElementById("d1")

		   b.innerText="修改"

       </script>

   

2.操作属性
        var d1 = document.getElementById("d1");
       获取属性
        alert(d1.getAttribute("width"));
        设置属性
        d1.setAttribute("width","200");
        移除属性
        d1.removeAttribute("width");

    <body>

        <input type="button" value="按钮" disabled="disabled" id="d1"/>

    </body>

	   <script type="text/javascript">

		   var b=document.getElementById("d1")

       </script>


    <body>

        <input type="button" value="按钮" disabled="disabled" id="d1"/>

    </body>

	   <script type="text/javascript">

		   var b=document.getElementById("d1")

		   b.removeAttribute("disabled")

       </script>

3.操作样式
        var d1 = document.getElementById("d1");
        获取样式(只能获取内联，内嵌和外部都不能获取)
        alert(d1.style.color);
       alert(d1.style.backgroundColor);
        修改样式
        d1.style.backgroundColor = "";

    <body>

        <div id="d1" style="width:100px; height:100px; background-color:#0F0">你好</div>

    </body>

	   <script type="text/javascript">

		   var b=document.getElementById("d1")

		   b.innerHTML="<b>修改</b>"


    <body>

        <div id="d1" style="width:100px; height:100px; background-color:#0F0">你好</div>

    </body>

	   <script type="text/javascript">

		   var b=document.getElementById("d1")

		   b.innerHTML="<b>修改</b>"

		   b.style.width="200px"

       </script>

JavaScript DOM2的更多相关文章

  1. 26 JavaScript HTML DOM简介&方法&文档

    HTML DOM: Document  Object  Model 文档对象模型.是HTML的标准对象模型和编程接口.(JavaScript只是可以操作HTML DOM的语言之一) 定义了HTML元素 ...

  2. JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底！

    由一个HTML进行说明,我就不敲了,直接copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  3. Javascript事件模型(一)：DOM0事件和DOM2事件

    javascript事件模型,本文主要有以下内容: DOM0事件模型 DOM2事件模型  一.DOM0事件模型 早期的事件模型称为DOM0级别. DOM0的事件具有极好的跨浏览器优势, 会以最快的速度 ...

  4. 《JavaScript高级程序设计》笔记：DOM2和DOM3（十二）

    DOM1级主要定义的是HTML和XML文档的底层结构.DOM2级和DOM3级在这个结构基础上引入了更多的交互能力,也支持更高级的XML特性.为此DOM2级和DOM3级分为了很多的模块(模块直接具有某种 ...

  5. JavaScript 之默认行为 DOM2级，事件委托机制

    1. 事件默认行为及阻止方式    1.1 浏览器的默认行为       JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等.    1.2 ...

  6. javascript中DOM0,DOM2,DOM3级事件模型解析

    DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...

  7. JavaScript 【非IE DOM2级XML】

    DOM2中的XML IE可以实现了对XML字符串或XML文件的读取,其他浏览器也各自实现了对XML处理功能.DOM2级在document.implementaion中引入了createDocument ...

  8. javascript高级程序设计第3版——第12章 DOM2与DOM3

    12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...

  9. Javascript高级编程学习笔记（54）—— DOM2和DOM3（6）范围选择

    范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...

随机推荐

  1. [转载]几个有趣的Linux命令

      本文给大家介绍几个有趣的Linux命令. 1. pv 命令 有时候我们在电影屏幕上看到一些字幕一个个匀速显示出来,像有人在边敲键盘,边显示一样.Linux上的pv命令可以实现这种效果. 默认情况下 ...

  2. 【读书笔记】setsockopt

    setsockopt   设置套接口的选项. #include <sys/types.h> #include <sys/socket.h> int setsockopt(int ...

  3. VC++ 学习笔记3 获取编辑框字符串

    边界框添加字符串比较简单 可以直接在对话框的空间上面点击右键添加变量,变量类型为CString  在此取名为m_NUM 直接使用m_NUM就是编辑框的CString, 举例: 在messagebox显 ...

  4. 【CF633H】Fibonacci-ish II 莫队+线段树

    [CF633H]Fibonacci-ish II 题意:给你一个长度为n的序列$a_i$.m个询问,每个询问形如l,r:将[l,r]中的所有$a_i$排序并去重,设得到的新数列为$b_i$,求$b_1 ...

  5. iOS - Block产生Memory Leaks循环引用导致的内存泄漏以及解决方案

    在ARC(自动引用技术)前,Objective-c都是手动来分配释放 释放 计数内存,其过程非常复杂. ARC技术推出后,貌似世界和平了很多,但是其实ARC并不等同于Java或者C#中的垃圾回收,AR ...

  6. Android系统dimension单位详解

    转载请注明出处,谢谢!http://www.cnblogs.com/coding-way/p/3457878.html Android设备种类多样,要想适配好各种屏幕,理解各种屏幕数据是必须的.首先先 ...

  7. Kibana在Linux上安装部署及使用说明

    Kibana安装及使用说明 Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索.查看交互存储在Elasticsearch索引中的数据. 官方地址:https://www. ...

  8. [分布式系统学习]阅读笔记 Distributed systems for fun and profit 之三 时间和顺序

    这是阅读 http://book.mixu.net/distsys/time.html 的笔记,是该系列的第三章. 为什么时间和顺序很重要呢?为什么我们关系事件A发生在事件B之前? 因为分布式系统要解 ...

  9. 公司HBase基准性能测试之结果篇

    上一篇文章<公司HBase基准性能测试之准备篇>中详细介绍了本次性能测试的基本准备情况,包括测试集群架构.单台机器软硬件配置.测试工具以及测试方法等,在此基础上本篇文章主要介绍HBase在 ...

  10. js之数据类型及类型转换

    一.数据类型 js中的数据类型:      5种基础类型:Undefined,Null,Boolean,Number,String      1种复合类型:Object(对象包括数组,函数等)   1 ...