js DOM操作

JavaScript的DOM元素

DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。

严格的说，DOM不属于Javascript，但是DOM操作是Javascript最常见的任务，而Javascript也是最常见的DOM操作语言。

 

Window操作

window.open(URL,name,specs,replace);

参数

说明

URL

可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

name

可选。指定target属性或窗口的名称。支持以下值：

• _blank - URL加载到一个新的窗口。这是默认
• _parent - URL加载到父框架
• _self - URL替换当前页面
• _top - URL替换任何可加载的框架集

specs

可选。一个逗号分隔的项目列表。支持以下值：

channelmode=yes|no|1|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes|no|1|0	是否显示地址字段.默认值是yes
menubar=yes|no|1|0	是否显示菜单栏.默认值是yes
resizable=yes|no|1|0	是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0	是否显示滚动条.默认值是yes
status=yes|no|1|0	是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

• true - URL 替换浏览历史中的当前条目。
• false - URL 在浏览历史中创建新的条目。

 

window.close();

关闭当前窗口，使用时对相关对象进行.close()；

 

window.moveTo(x,y);

移动页面至某一位置，使用时对相关对象进行.moveTo()；

 

window.resizeTo(x,y);

调整页面宽高，使用时对相关对象进行.resizeTo()；

window.navigate("http://jb51.net/") 这个方法是只针对IE的，不适用于火狐等其他浏览器，在HTML DOM Window Object中，根本没有列出window.navigate这个方法，所以这个方法尽量少用，遗忘最好。

 

window.history.back();  页面进行后退

window.history.forward(); 页面前进

window.history.go(); 前进后退n，n可正可负

 

window.location

var s = window.location.href; 获得当前页面地址

var s = window.location.hostname; 获得当前页面主机名，域名，网站名

var s = window.location.pathname; 获得当前页面路径名。

window.location.href="网址";  跳转页面

 

JavaScript的间隔与延迟

间隔  setInterval()：

setInterval("函数名"，间隔时间)

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval(间隔的变量名);   停止间隔

 

延迟 setTimeout()：

setTimeout("函数名"，间隔时间) 方法用于在指定的毫秒数后调用函数或计算表达式。 

 

JavaScript的DOM操作

1.JavaScript：写入 HTML 输出

实例

document.write("<h1>This is a heading</h1>");

2.JavaScript：对事件作出反应

实例

<button type="button" onclick="alert('Welcome!')">点击这里 </button>

3.JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

查找元素：

根据id获取元素

document.getElementById("id");

根据class获取元素

document.getElementsByClassName("class");

根据标签名获取元素

document.getElementsByTagName("div");

根据name获取元素

document.getElementsByName("name");

操作内容：

1.获取对象里的html代码与文字

  获取的对象.innerHTML;

2.获取对象里的文字----兼容有问题

  获取的对象.innerText;textContent;

              

               3.改变对象里的html代码与文字

获取的对象.innerHTML="改变的内容";

4.改变对象里的文字----兼容有问题

获取的对象.innerText="改变的内容";

表单可进行的特殊操作

1.获取对象的value值

 获取的对象.value

操作属性

1.设置一个属性，添加或更改

获取的对象.setAttribute("属性名","属性值")

2.获取属性的值

获取的对象.getAttribute("属性名");

3.移除一个属性

获取的对象.removeAttribute("属性名");

   操作样式

1.操作样式

获取的对象.style.样式=”” ;     //操作时属性所有的-都删除  后面的第一个字母改成大写

2.获取样式

Var a = 获取的对象.style.样式

checked="checked" 

false

aaa[a].checked = true;    //判断是否被选中