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>