JavaScript DOM2
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的更多相关文章
- 26 JavaScript HTML DOM简介&方法&文档
HTML DOM: Document Object Model 文档对象模型.是HTML的标准对象模型和编程接口.(JavaScript只是可以操作HTML DOM的语言之一) 定义了HTML元素 ...
- JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底!
由一个HTML进行说明,我就不敲了,直接copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...
- Javascript事件模型(一):DOM0事件和DOM2事件
javascript事件模型,本文主要有以下内容: DOM0事件模型 DOM2事件模型 一.DOM0事件模型 早期的事件模型称为DOM0级别. DOM0的事件具有极好的跨浏览器优势, 会以最快的速度 ...
- 《JavaScript高级程序设计》笔记:DOM2和DOM3(十二)
DOM1级主要定义的是HTML和XML文档的底层结构.DOM2级和DOM3级在这个结构基础上引入了更多的交互能力,也支持更高级的XML特性.为此DOM2级和DOM3级分为了很多的模块(模块直接具有某种 ...
- JavaScript 之默认行为 DOM2级,事件委托机制
1. 事件默认行为及阻止方式 1.1 浏览器的默认行为 JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等. 1.2 ...
- javascript中DOM0,DOM2,DOM3级事件模型解析
DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...
- JavaScript 【非IE DOM2级XML】
DOM2中的XML IE可以实现了对XML字符串或XML文件的读取,其他浏览器也各自实现了对XML处理功能.DOM2级在document.implementaion中引入了createDocument ...
- javascript高级程序设计第3版——第12章 DOM2与DOM3
12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...
- Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择
范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...
随机推荐
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十二:串口模块① — 发送
实验十二:串口模块① — 发送 串口固然是典型的实验,想必许多同学已经作烂,不过笔者还要循例介绍一下.我们知道串口有发送与接收之分,实验十二的实验目的就是实现串口发送,然而不同的是 ... 笔者会用另 ...
- MacOS 安装 nginx
brew install nginx 开机启动 $ sudo cp `brew --prefix nginx`/homebrew.mxcl.nginx.plist /Library/LaunchDae ...
- IIS7配置伪静态把后缀名映射为html方案
1.在IIS新建站点.[创建的时候不用去选择版本和模式,默认即可] 2.选中站点,切换到功能试图,找到“处理程序映射",双击之后,在打开窗口右侧的操作栏目下做如下设置: 1)右边" ...
- Cocoa Touch框架
iOS – Cocoa Touch简介: iOS 应用程序的基础 Cocoa Touch 框架重用了许多 Mac 系统的成熟模式,但是它更加专注于触摸的接口和优化.UIKit 为开发者提供了在 iOS ...
- iOS - 使用WKWebView时OC调JS的user-select属性控制用户操作
// 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigatio ...
- R的transform
函数transform 作用:为原数据框添加新的列,改变原变量列的值,通过赋值NULL删除列变量 用法: transform(‘data’,….) data就是要修改的data, '…..'代表你要 ...
- 这个代码给所有带有name属性的链接加了一个背景色
jQuery起点教程之使用选择器和事件jQuery提供两种方式来选择html的elements: 第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$(&quo ...
- JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日
标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...
- UVALive 3938 - "Ray, Pass me the dishes!" - [最大连续子列和+线段树]
题目链接:https://cn.vjudge.net/problem/UVALive-3938 参考刘汝佳书上说的: 题意: 给出一个长度为n的序列, 再给出m个询问, 每个询问是在序列 $[a,b] ...
- Springboot中静态资源和拦截器处理(踩了坑)
背景: 在项目中我使用了自定义的Filter 这时候过滤了很多路径,当然对静态资源我是直接放过去的,但是,还是出现了静态资源没办法访问到springboot默认的文件夹中得文件 说下默认映射的文件夹有 ...