JS DOM操作(一) 对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法。
在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。
DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。、
Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,
Dom技术使得页面的交互性大大地增强。
对一个元素进行点击操作
var v = document.getElementByid ( " " ) | -- 括号内为被进行操作的元素的 id
v.onclick = function() |
{ |
要进行的操作 |
} |
—— - —— - —— - —— - —— - —— - —— - —
一 Windokws 对象操作
1、打开窗体
window.open(①,②,③,④);
①②③ string 类型
④ bool 型
① 写页面地址
② 打开方式 -- _blank 在新窗口打开
-- _self 在原窗口打开
③ 打开窗口的格式,可写多个用空格隔开
-- width=100 height = 100 宽带高度(像素)
-- left = 100 top = 100 距左 距上(像素)
window.open 有返回值,返回值是新打开的窗口对象。
打开一个窗口并保存在变量中
var w = window.open();
可以将打开的多个窗口保存在数组中
function openW ( )
{
W[i++] = window.open( );
}
-- 建议 window.open 容易被一些高级浏览器屏蔽掉,最好在新窗体中打开
2、关闭当前窗口
window.close()
w.close(); -- 关闭保存在变量 w 中的那个窗口
window.poener.close( ); -- 关闭打开当前窗口的源窗口
关闭多个窗口 -- 将打开的窗口存入数组内,利用循环将其挨个关闭
3、调整页面
window.scrollTo(x,y) --滚动页面至哪里,y 代表纵向滚动
window.scrollTo(0,300) 页面从上到下滚动,300像素到第一行的位置
-- 与锚点功能差不多
二 windows.history 对象操作
window.history.back(); -- 页面后退
window.history.forward(); -- 页面前进
window.history.go(n); -- n为正前进 n 个页面,n 为负后退 n 个页面
三 window.location 对象操作
location -- 地址栏
var s = window.location.href() -- 获取当前页面地址
window.location.href="http://www.baidu.com"; -- 修改页面地址跳转页面
-- 与 window.open(); 相比 window.location.href="" 基本不会被浏览器屏蔽
-- 建议将之用在在原窗口打开新页面
JS DOM操作(一) 对页面的操作的更多相关文章
- js对iframe内外(父子)页面进行操作
dom对象推荐阅读 怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是conten ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- js dom 操作
JS的DOM操作 1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
- java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)
1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
随机推荐
- C#生成指定长度随机数
public static string GetRandomString(int iLength) { ";// 随机字符中也可以为汉字(任何) StringBuilder sb = new ...
- WPF---DataGrid设置列的百分比宽度 & 列值显示格式化
<DataGrid Height="Auto" Width="Auto"> <DataGrid.Columns> <DataGri ...
- EF使用MySql DBFirst产品的问题总结
一.实体数据模型向导->新建连接->更改数据源 找不到MySql Batabase选项. 解决:需求安装以下两个插件(mysql官网都可以找到)(注意版本,后面会讲到) 1.MySql ...
- nodejs学习(imooc课程笔记, 主讲人Scott)
课程地址: 进击Node.js基础(一) 进击Node.js基础(二) 1. nodejs创建服务器 var http = require('http'); //加载http模块 //请求进来时, 告 ...
- 【洛谷4238】 多项式求逆(NTT,分治)
前言 多项式求逆还是爽的一批 Solution 考虑分治求解这个问题. 直接每一次NTT一下就好了. 代码实现 #include<stdio.h> #include<stdlib.h ...
- Ubutntu安装docker启动报Removed /etc/systemd/system/docker.service.
Ubutntu安装docker启动报Removed /etc/systemd/system/docker.service.的错误,只需要执行以下三条命令. systemctl unmask docke ...
- Java DB访问(一) JDBC
项目说明 项目采用 maven 组织 ,jdbc 唯一的依赖就是 mysql-connector-java pom 依赖如下: <dependency> <groupId>my ...
- PHP设计模式:观察者模式
示例代码详见https://github.com/52fhy/design_patterns 观察者模式 观察者模式(Observer)是对象的行为模式,又叫发布-订阅(Publish/Subscri ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- 29-hadoop-使用phtonenix工具&分页&数据导入
因为rowkey一般有业务逻辑, 所以不可以直接使用rowkey进行分页, startkey, endkey 想要使用SQL语句对Hbase进行查询,需要使用Apache的开源框架Phoenix. 安 ...