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属性或窗口的名称。支持以下值:
|
||||||||||||||||||||||||||||
specs |
可选。一个逗号分隔的项目列表。支持以下值:
|
||||||||||||||||||||||||||||
replace |
Optional.Specifies规定了装载到窗口的 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; //判断是否被选中