一、操作属性：
（1）添加属性：对象.setAttribute（“属性名”，“属性值”）；--设置一个属性，添加或更改
注：若要添加属性已存在则会覆盖该属性，达到修改目的
（2）获取属性：对象.getAttribute(“属性名”);---获取属性值，若无该属性则返回null
（3）移除属性：对象.removeAttribute（“属性名”）；---移除一个属性
例：
<style type="text/css">
#div1 {
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="div1" style="font-size:10px; ">这是内容</div>
</body>
</html>
<script type="text/javascript">
var nav1 = document.getElementById("div1");
nav1.onclick = function () {
nav1.removeAttribute("style");
nav1.setAttribute("style", "color:white");
alert(nav1.getAttribute("style"));
}
</script>
二、操作内容
1、赋值添加操作：（1）、普通元素.innerText="值"；---以文本形式执行，不会执行其中代码；
（2）、普通元素.innerHTML=“值”；---可识别编程语句，并执行其中代码
（3）表单元素：表单元素.value="值" 或直接添加属性（setAttribute）
2、取值：（1）变量名=普通元素.innerText；----以文本形式取出其中所有文本代码
（2）变量名=普通元素.innerHTML；---只取出其中文本，不会代码
（3）表单元素：变量名=表单元素.value
例：
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background-color: blue;
}
.div2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
var nav1 = document.getElementById("div1");
nav1.onclick = function () {
this.innerHTML = "<div class=‘div2‘>这是内容</div>";
}
nav1.onmouseover = function () {
this.innerText = "<span>这也是内容</span>";
}
</script>
三、操作相关元素：
（1）同辈操作：1、变量名.nextSibling--找变量的下一个同辈元素，注意空格回车换行
2、变量名.previousSibling--找变量的上一个同辈元素，注意包含空格回车换行
（2）父辈级操作：1、变量名.parentNode--找变量的上一级父级元素
2、变量名.childNodes---找变量的下一级子元素，找出的是数组
3、变量名.firstChild---找第一个子级元素 lastChild---找最后以个子级元素，childNodes[i]---找第i个子级元素
4、alert（nodes[i]instanceof Text）;--判断是不是文本，返回true/false
四、定时器
1、window.setTimeout(function(){},间隔时间毫秒);---延迟执行，只执行一次
2、window.setInterval(function(){},间隔时间毫秒);----间隔时间循环一次，一直循环
有返回值，可以用一个变量接受
3、window.clearInterval(要关闭的定时器对象);