标签：javascript dom编程
DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
一、查找元素（选择器）
1、直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
<script>
a = document.getElementById(‘id1‘);
a = document.getElementsByTagName("div"); //会生成数组
a = document.getElementsByName(‘name‘); //会生成数组
a = document.getElementsByClassName("d1"); //会生成数组
b = a[0].innerText;
console.log(b);
</script>2、间接查找
//可以将文本都找出来 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 //不可以将文本找出来 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
例子：
var a = document.getElementById(‘id1‘); //可以将文本都找出来 var b = a.parentNode; charen_list1 = b.childNodes; charen_list1.nextSibling; //不可以将文本找出来 var c = a.parentElement; charen_list2 = c.children; console.log(charen_list2[0])
二、操作
1、内容
innerText 文本 outerText innerHTML HTML内容 outerHTML 重要：value 值 注：以下操作可查询也可赋值 checkbox -- value -- checked radio //单选，定义一个相同的name可单选 -- value -- checked select -- value --selectedIndex 获取列表中的索引
简单例子：
//DOM内容操作 //（1）innerText/innerHTML操作 var text_html = document.getElementById(‘id1‘); var text = text_html.innerText; var html = text_html.innerHTML; alert(text); alert(html); //（2）value操作 var tex = document.getElementById(‘tex‘); console.log(tex.value); //获得value值 tex.value = ‘value‘ //设置value值 var sel = document.getElementById(‘sel‘); console.log(sel.value) ;
radio、select的value值操作：
<!DOCTYPE html> <html > <head> <title>radio、select的value值操作</title> <meta charset="utf-8"> </head> <body> <ul id="Sex"> <li><input type="radio" name="sex" value="1">男</li> <li><input type="radio" name="sex" value="2">女</li> </ul> <select name="pariviage" id="par"> <option value="1">广东</option> <option value="2" selected="selected">广西</option> <option value="3">福建</option> <option value="4">湖南</option> </select> <script> //radio 的value属性操作 var SEX = document.getElementsByName(‘sex‘); console.log(SEX[0].value) console.log(SEX[1].checked=true) //select的value属性操作 var Pra = document.getElementById(‘par‘); console.log(Pra.value=4) //可获取值也可赋值 console.log(Pra.selectedIndex) //获取列表中的索引 </script> </body> </html>
2、操作样式：class级别
className // 获取所有类名，得到的是字符串
classList //获取所有类名的列表
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
例子：简陋模态对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
.hide{
visibility: hidden;
/* display: none; 这样也是可以的*/
}
.butt{
position: fixed;
left: 200px;
top:200px;
z-index: 1;
}
.shadow{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
z-index: 2;
}
.mode{
position: fixed; /*fixed:固定 absolute：继承*/
height: 300px;
width: 500px;
left: 50%;
top: 50%;
background: white;
margin-left: -250px; /* 以左上角为起点，向左移动250px,向上移动150px,移动以实际的宽和高的一半 */
margin-top: -220px;
z-index: 3;
}
</style>
</head>
<body>
<div class="butt">
<input type="button" value="模态对话框" id="but" onclick="Show()">
</div>
<!-- 模态对话框 -->
<div class="shadow hide" id="shadow"></div>
<div class="mode hide" id="mode">
<div class="login">
<div>登录：<input type="text"></div>
<div>密码：<input type="password"></div>
<div>
<input type="button" value="确定">
<input type="button" value="取消" id="hide" onclick="Hide()">
</div>
</div>
</div>
<script>
function Show(){
document.getElementById(‘shadow‘).classList.remove(‘hide‘);
document.getElementById(‘mode‘).classList.remove(‘hide‘);
};
function Hide(){
document.getElementById(‘shadow‘).classList.add(‘hide‘);
document.getElementById(‘mode‘).classList.add(‘hide‘);
}
</script>
</body>
</html>特殊：this
<!DOCTYPE html>
<html >
<head>
<title>this特殊属性</title>
<meta charset="utf-8">
<script>
function show(arg){
console.log(arg); //获取到div的标签
}
</script>
</head>
<body>
<div style="height: 50px;width: 50px;cursor: pointer;background: red;text-align: center;line-height: 50px" onclick="show(this);">
点我
</div>
</body>
</html>例子：折叠菜单,简单的两种形式
方法一：用this属性
<!DOCTYPE html>
<html >
<head>
<title>竖向的折叠菜单</title>
<meta charset="utf-8">
<script>
function showmenu(arg) {
var Menu = arg;
console.log(Menu);
var List = Menu.parentElement.children[1];
if (List.style.display=="none") {
List.style.display="block";
Menu.className = "title1";
}else {
List.style.display="none";
Menu.className = "title";
}
}
</script>
<style type="text/css">
*{margin:0;padding:0;list-style:none;font-size:14px}
#nav{margin:10px;text-align:center;line-height:25px;width:200px;}
.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}
.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div id="nav">
<div>
<div class="title" id="menu1" onclick="showmenu(this) ">菜单一</div>
<div id="list1" class="content" style="display:none">
<ul>
<li><a href="http://www.baidu.com">jQuery</a></li>
<li><a href="http://www.baidu.com">Extjs</a></li>
<li><a href="http://www.baidu.com">Mootools</a></li>
</ul>
</div>
</div>
<div>
<div class="title" id="menu2" onclick="showmenu(this)">菜单二</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>菜单导航</li>
<li>层和布局</li>
<li>图片切换</li>
</ul>
</div>
</div>
</div>
</body>
</html>方法二：不用this属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>竖向的折叠菜单</title>
<script language = JavaScript>
function showmenu(id) {
var list = document.getElementById("list"+id);
var menu = document.getElementById("menu"+id)
if (list.style.display=="none") {
document.getElementById("list"+id).style.display="block";
menu.className = "title1";
}else {
document.getElementById("list"+id).style.display="none";
menu.className = "title";
}
}
</script>
<style type="text/css">
*{margin:0;padding:0;list-style:none;font-size:14px}
#nav{margin:10px;text-align:center;line-height:25px;width:200px;}
.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}
.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div id="nav">
<div class="title" id="menu1" onclick="showmenu(‘1‘) ">菜单一</div>
<div id="list1" class="content" style="display:none">
<ul>
<li><a href="http://www.baidu.com">jQuery</a></li>
<li>Extjs</li>
<li>Mootools</li>
</ul>
</div>
<div class="title" id="menu2" onclick="showmenu(‘2‘)">菜单二</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>菜单导航</li>
<li>层和布局</li>
<li>图片切换</li>
</ul>
</div>
</div>
</body>
</html>例子：搜索框的两种实现方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搜索框的两种实现方法</title>
<style>
.Gar{color: gray}
.Bla{color: black}
</style>
</head>
<body>
<!-- 搜索框有两种方法：第一种最常用，但是低级浏览器不支持-->
<div>方法一：</div>
<input type="text" placeholder="请输入内容">
<div>方法二：</div>
<!-- onfocus：单光标点进在里面时 onblur：单光标没点在里面时 -->
<input type="text" value="请输入内容" class="Gar" onfocus="Point(this)" onblur="Out(this)"/>
<script >
function Point(arg){
if (arg.value == ‘请输入内容‘){
arg.value = ‘‘;
arg.className = "Bla";
}
}
function Out(arg){
if(arg.value.trim() == "请输入内容" || arg.value.trim().length == 0){
arg.value = "请输入内容";
arg.className = ‘Gar‘;
}
}
</script>
</body>
</html>注意：
onfocus：单光标点进在里面时
onblur：单光标没点在里面时
例子：全选，取消，反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多选框</title>
</head>
<body>
<div>
<input type="button" value="全选" onclick="Check_All()">
<input type="button" value="取消" onclick="Cancel_All()">
<input type="button" value="反选" onclick="Invert_All()">
</div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>NAME</th>
<th>PASSWORD</th>
</tr>
</thead>
<tbody id="Checks">
<tr>
<td><input class="che1" type="checkbox" value="1" ></td>
<td>1</td>
<td>翁孟铠</td>
<td>passwd</td>
</tr>
<tr>
<td><input class="che1" type="checkbox" value="2" ></td>
<td>2</td>
<td>wmk</td>
<td>admin</td>
</tr>
<tr>
<td><input class="che1" type="checkbox" value="3" ></td>
<td>3</td>
<td>张三</td>
<td>admin</td>
</tr>
<tr>
<td><input class="che1" type="checkbox" value="4" ></td>
<td>2</td>
<td>李四</td>
<td>admin</td>
</tr>
<tr>
<td><input id="status" class="che1" type="checkbox" value="5" onclick="Check_All_1()" ></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
function Check_All(){
var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘);
for(var item in Check_Box){
Check_Box[item].checked = true;
}
}
function Check_All_1(){
var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘);
var Check_Status = document.getElementById(‘status‘).checked;
for(var item in Check_Box){
if(Check_Box[item].checked){
Check_Box[item].checked = false;
}else{
Check_Box[item].checked = true;
}
}
}
function Cancel_All(){
var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘);
for(var item in Check_Box){
Check_Box[item].checked = false;
}
}
function Invert_All(){
var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘);
for(var item in Check_Box){
if(Check_Box[item].checked){
Check_Box[item].checked = false;
}else{
Check_Box[item].checked = true;
}
}
}
</script>
</body>
</html>3、属性：可自定义属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById(‘n1‘).setAttributeNode(atr);
*/
actiontab菜单：
<!DOCTYPE html>
<html >
<head>
<title>tab菜单</title>
<meta charset="utf-8">
<style>
*{margin: 0;padding: 0}
.Tab{width: 700px;height: 500px;margin: 0 auto}
.Tab .nav{width: 700px;height:53px;border: 0}
ul li{list-style-type: none;float: left;margin:0;padding: 15px 20px 15px 20px;font-size: 20px;border: 0;cursor: pointer}
.Tab .con{width: 700px;height: 440px;border: 1px solid black}
.change{background: red;color: white}
.hide{display: none}
</style>
</head>
<body>
<div class="Tab">
<div class="nav" id="tab_nav">
<ul>
<li onclick="show(this)" Nav="h1">首页</li>
<li onclick="show(this)" Nav="h2">菜单</li>
<li onclick="show(this)" Nav="h3">其他</li>
</ul>
</div>
<div class="con" id="tab_con">
<div Con="h1" >首页内容</div>
<div Con="h2" class="hide">菜单内容</div>
<div Con="h3" class="hide">其他内容</div>
</div>
</div>
<script>
var CON = document.getElementById(‘tab_con‘).children;
console.log(CON)
function show(arg){
var Li_list = arg.parentElement.children;
for(var item in Li_list){
var Li = Li_list[item];
Li.className=‘‘;
}
arg.className = ‘change‘;
var NAV = arg.getAttribute(‘Nav‘);
var CON = document.getElementById(‘tab_con‘).children;
for( var i=0;i<CON.length;i++){
console.log(CON[i])
var C = CON[i].getAttribute(‘Con‘);
if(C == NAV){
CON[i].className="";
}else {
CON[i].className="hide";
}
}
}
</script>
</body>
</html>5、样式操作：style级别
style.cssText 可对style中的代码进行读写 style.item() 返回给定位置的CSS属性的名称 style.length style代码块中参数个数 style.getPropertyValue() 返回给定属性的字符串值 style.getPropertyPriority() 检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串 style.removeProperty() 删除指定属性 style.setProperty() 设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"")
简单例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="t" style="background-color: yellow; width: 100px; height: 100px">8</div>
<script>
var tT = document.getElementById("t");
console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow;
tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改属性
console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow;
console.log(tT.style.item("0")); //background-color
console.log(tT.style.length); //3
console.log(tT.style.getPropertyValue("background-color")); //yellow
console.log(tT.style.getPropertyPriority("background-color")); //空字符串
console.log(tT.style.removeProperty("width")); //200px
tT.style.setProperty("width","200px",""); //设置属性，第三个值为important优先值，可不写
</script>
</body>
</html>例子：操作标签style
var obj = document.getElementById(‘i1‘) obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
<script>
function Focus(ths){
ths.style.color = "black";
if(ths.value == ‘请输入关键字‘ || ths.value.trim() == ""){
ths.value = "";
}
}
function Blur(ths){
if(ths.value.trim() == ""){
ths.value = ‘请输入关键字‘;
ths.style.color = ‘gray‘;
}else{
ths.style.color = "black";
}
}
</script>6、标签操作
a.创建标签
// 方式一 var tag = document.createElement(‘a‘) tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/wupeiqi" // 方式二 var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/wupeiqi‘>wupeiqi</a>"
b.操作标签
// 方式一
var obj = "<input type=‘text‘ />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘))
注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
beforeEnd：内部的最后一个
beforeBegin：外部的上边
afterBegin：内部第一个
afterEnd：外部的下面
// 方式二：创建节点
var tag = document.createElement(‘a‘)
xxx.appendChild(tag) //从XXX节点的最后一行
xxx.insertBefore(tag,xxx_list[1]) //添加指定位置的前面
xxx.insertAfter(tag,xxx_list[1]) //添加指定位置的后面，注意这是JQ的
xxx.removeChild(xxx_list[3]); //指定位置删除节点例子：添加和删除一行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加一行</title>
</head>
<body>
<div>
<input type="button" value="添加" onclick="Add()">
<input type="button" value="删除" onclick="Clean()"
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>用户名</th>
</tr>
</thead>
<tbody id="TB">
<tr>
<td>1</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<script>
function Add(){
var TB = document.getElementById(‘TB‘);
var TB_list = document.getElementById(‘TB‘).children;
var TB_list_lenght = TB_list.length;
var add_line_tr = document.createElement(‘tr‘);
var add_line_td = document.createElement(‘td‘);
var input_1 = document.createElement(‘input‘);
input_1.type = ‘text‘;
add_line_td.appendChild(input_1);
add_line_tr.appendChild(add_line_td);
//add_line_tr.innerHTML = `<td>${TB_list_lenght+1}</td>`+‘<td><input type="text"></td>‘+‘<td><input type="text"></td>‘+‘<td><input type="text"></td>‘
TB.appendChild(add_line_tr); //从最后一行添加
//TB.insertBefore(add_line_tr,TB_list[TB_list.length]); //指定位置添加
}
function Clean(){
var TB = document.getElementById(‘TB‘);
var TB_list = document.getElementById(‘TB‘).children;
var TB_list_lenght = TB_list.length;
if(TB_list_lenght > 3){
TB.removeChild(TB_list[TB_list_lenght-1])
}
}
</script>
</body>
</html>c.复制和移动标签
xxx.appendChild(obj) 将obj标签节点移动到xxx节点 xxx.cloneNode(true) 复制xxx节点以及内部节点 xxx.cloneNode() 复制xxx节点（不复制内部内部节点）
例子：标签操作之移动和拷贝
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签操作之移动和拷贝</title> </head> <body> <div id="h1" style="background: burlywood;width: 100%;height: 50px"> <a href="#">移动</a> <a href="#">复制</a> </div> <div id="h2"> <div>aaa</div> <div>bbb</div> </div> <script> var obj = document.createElement(‘a‘) obj.textContent = ‘obj‘ var h1 = document.getElementById(‘h1‘); var h2 = document.getElementById(‘h2‘); h2.appendChild(h1); //移动到h2里面 var h3 = h1.cloneNode(); //只是复制外层标签，里面不复制 h3.appendChild(obj); h3.style.backgroundColor = ‘red‘; var h4 = h1.cloneNode(true); //将里面外面都复制 h2.appendChild(h3); h2.appendChild(h4) </script> </body> </html>
6、高度操作
height_operate.offsetParent //父定位标签 height_operate.scrollTop //滚动条距离顶部的高度 height_operate.scrollHeight //文档的高度+padding高度 height_operate.clientTop //边框的高度：bord的高度 height_operate.clientHeight //可见方框的高度+padding，不包含border height_operate.offsetTop //当前标签距离‘顶部‘的的高度 注意：这是相对位置，要看position height_operate.offsetHeight //可见范围的文档高度+padding+bord
注意：height_operate是节点
例子：高度操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高度操作</title>
<style>
*{margin: 0;padding: 0}
.Height_operate{width: 700px;height: 450px;margin: 0 auto;border: 4px solid peru;overflow: auto;padding: 10px;position: relative}
</style>
</head>
<body>
<div style="height: 20px;background: orange"></div>
<div style="border: 4px solid black;padding: 20px;position: absolute">
<div id="height_operate" class="Height_operate">
<div class="content" style="height: 1000px;background: rgba(0,0,0,0.2);">
<div style="height: 80%;background: pink">内容（以上是padding）</div>
</div>
</div>
</div>
<script>
var height_operate = document.getElementById(‘height_operate‘)
console.log(height_operate.scrollTop); //滚动条距离顶部的高度
console.log(height_operate.scrollHeight); //文档的高度+padding高度
console.log(height_operate.clientTop); //边框的高度：bord的高度
console.log(height_operate.clientHeight); //可见方框的高度+padding，不包含border
console.log(height_operate.offsetTop); //当前标签距离‘顶部‘的的高度 注意：这是相对位置，要看position
console.log(height_operate.offsetHeight); //可见范围的文档高度+padding+bord
</script>
</body>
</html>例子：回到顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<style>
.Go_Top{position: fixed;right: 20px;bottom: 50px;width: 40px;height: 40px;background: rgba(0,0,0,0.3);cursor: pointer;z-index: 1}
.Go_Top_Change{position: fixed;right: 20px;bottom: 50px;width: 40px;height: 40px;background: rgba(0,0,0,0.6);visibility: hidden;z-index: 2;text-align: center;line-height: 19px}
.Go_Top:hover .Go_Top_Change{
visibility: visible;
}
.Hide{display: none}
</style>
</head>
<body onscroll="Get_Height_Scroll()">
<div style="height: 2000px"></div>
<div class="Go_Top Hide" id="go_top">
<div class="Go_Top_Change" onclick="Go_Top()">回到顶部</div>
</div>
<script>
function Get_Height_Scroll(){
var height_scroll = document.body.scrollTop;
var go_top = document.getElementById(‘go_top‘);
if(height_scroll > 100){
go_top.classList.remove(‘Hide‘)
}else {
go_top.classList.add(‘Hide‘)
}
}
function Go_Top(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>例子：滚动菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动菜单</title>
<style>
*{margin: 0;padding: 0}
body{background: #DDDDDD}
li {list-style-type:none;text-align: center}
.w{margin: 0 auto}
.bolder{font-weight: bolder;background: #27a9e3}
.fixed{position: fixed;top: 20px}
.bg_head{height: 45px;background: #0f5179}
.bg_content{width: 960px;background: white;height: 2000px}
.bg_content .menu{width: 200px;float: left}
.bg_content .content{width: 758px;height: 100%;border:1px solid #000000;float: right;text-align: center}
</style>
</head>
<body onscroll="Scroll()">
<div class="bg_head" ></div>
<div class="bg_content w">
<div class="menu" id="Menu">
<ul>
<li style="position: relative;left: 0"><h2 style="line-height: 60px;" id="menu_contents">目  录</h2></li>
</ul>
<ul style="line-height: 30px" id="menu_chapter">
<li >第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</div>
<div class="content" id="content">
<div style="height: 500px"><h2>目  录</h2></div>
<div style="height: 1400px">第一章</div>
<div style="height: 50px">第二章</div>
<div style="height: 50px">第三章</div>
</div>
</div>
<script>
function Scroll(){
var scroll_top = document.body.scrollTop;
var menu = document.getElementById(‘Menu‘);
var content_charen_list = document.getElementById(‘content‘).children;
var menu_li = menu.getElementsByTagName(‘li‘);
if(scroll_top > 80){
menu.classList.add(‘fixed‘)
}else {
menu.classList.remove(‘fixed‘)
}
for(var i=0;i<content_charen_list.length;i++){
var content_item = content_charen_list[i];
var offset_top = content_item.offsetTop;
var offset_height = content_item.offsetHeight;
var top_count = offset_height + offset_top;
for(var item=0;item<menu_li.length;item++){
if(scroll_top>offset_top && scroll_top<top_count) {
menu_li[i].className = ‘bolder‘
}
}
}
}
</script>
</body>
</html>7、提交表单
document.geElementById(‘form‘).submit()
例子：提交表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form提交</title>
</head>
<body >
<!--搜狗的：https://www.sogou.com/web?-->
<form action="https://www.baidu.com/s?" id="Form" method="get">
<input type="text" name="wd">
<input type="submit" value="提交">
<input id="button" type="button" value="button" onclick="Button()">
</form>
<script>
function Button(){
document.getElementById(‘Form‘).submit();
}
</script>
</body>
</html>8、其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器：跑马灯有例子 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
例子：定时器之删除和恢复简单例子
<!DOCTYPE html>
<html >
<head>
<title>定时器</title>
<meta charset="utf-8">
<style>
.hide{display: none}
</style>
</head>
<body>
<input type="button" value="删除" onclick="show_tips()" >
<input type="button" value="恢复文件" id="delect_repeal" class="hide" onclick="stop_delect()">
<div id="delect_tips" class="hide">5s后彻底删除文件</div>
<script>
function show_tips(){
delect_tips =document.getElementById(‘delect_tips‘);
delect_repeal = document.getElementById(‘delect_repeal‘);
delect_repeal.classList.remove(‘hide‘);
delect_tips.classList.remove(‘hide‘);
//setTimeout(hide_tips,5000)
item = setTimeout(hide_tips,5000)
}
function hide_tips(){
delect_repeal.className=‘hide‘;
delect_tips.className=‘hide‘;
}
function stop_delect(){
clearTimeout(item)
}
</script>
</body>
</html>参考：http://www.cnblogs.com/suoning/p/5656922.html
本文出自 “发酸的牛奶” 博客，谢绝转载！
标签：javascript dom编程
原文地址：http://wengmengkai.blog.51cto.com/9016647/1844730
