标签：
一 。 JavaScrip的嵌入方式：
----- <li onclick="alert(‘Hello‘)">条目一</li> 内嵌在html中
------<li onclick="init()">条目一</li>
<script>
function init(){
alert("Hello")；
}
</script> 调用script标签中的方法
-------<script href="1.js"></script> 调用外部的js代码
二。 javascrip的组成
ECMAScript（规范） + BOM（浏览器对象模型） + DOM（文档对象模型）
三。javascript的层次结构
-------- screen
-------- navigator
window -------- document
-------- history
-------- location
-------- .....
四。节点对象的获取方式
document.getElementById("id"); 通过ID获取指定节点对象
document.getElementByTagName("TagName"); 通过节点名称获取节点对象
document.getElementByName("classname") 通过class=“username”指定的节点获取该节点，限定为表单节点
document.form[] 获取页面所有的表单对象 <form>
document.images[] 获取页面所有img标签对象 <img>
document.links[] 获取页面所有超链接标签对象<a>
利用节点关系获取(属性)
parentNode（父节点）
childNodes(子节点)
firstChild（大儿子节点）
lastChild (小儿子节点)
nextSibling(下一个兄弟节点)
previousSibling(上一个兄弟节点)
五。 节点对象分类：
元素节点 文本节点 属性节点
六。 节点属性
a. nodeName（节点名称）
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
b. nodeValue（节点值）
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
c. nodeType（节点类型） : nodeType 属性可返回节点的类型。
标签节点的类型值是 1
属性节点的类型值是 2
文本节点的类型值是 3
七。节点的增删改查操作
a. 节点的查操作如上
b. 节点的增加操作 appendChild（）或 innerHtml方式
c. 节点的删操作 removeChild（）
d.节点改操作 replaceChild( nodeA,nodeB) 用nodeA节点替换节点nodeB
e. 节点创建操作 document.createElement() : 创建一个标签节点 docuemnt.createTextNode("内容") ：创建一个文本节点
八。 javascript代码设置定时器
var timer = setTimerOut(function() , time); 调用一次
var timer = setInterval(func(), time); 反复被调用
---clearTimeout(timer) 移除由setTimeout()创建的定时器
---clearInterval(timer) 移除由setInterval()创建的定时器
九。节点对象在做动画时注意：
1. offsetLeft offsetTop offsetWidth offsetheigh 获取元素的左边距 右边距 宽度（包括border padding） 高度（包括border padding）
2. 元素没有被style->position属性修饰，改变其left，right属性不生效，但可以通过marginLeft marginTop可以改变位置。
3. 在页面内置的style属性中修饰的属性是无法通过javascrip直接拿到，如：
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
li{
width: 160px;
height: 80px;
background-color: yellow;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<javascript>
function getWidth(){
var div = document.getElementById("id");
return div.style.width;
}
<javascript>
这种方式是无法拿去到width的值，因为他被定义在css样式表中。但是可以通过如下方式获取：
function getStyle(obj,attr){
// 兼容IE
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
//兼容市面上大部分的浏览器
return getComputedStyle(obj,false)[attr];
}
}
十： javascript的演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
li{
width: 160px;
height: 80px;
background-color: yellow;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<script href="1.js">
window.onload = function(){
var ali = document.getElementsByTagName("li");
for(var i=0;i<ali.length;i++){
ali[i].onmouseover = function(){
startMove(this,400);
}
ali[i].onmouseout = function(){
startMove(this,160);
}
}
}
function startMove(obj,Itarger){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var currentwidth = obj.offsetWidth;
var speed = (Itarger - currentwidth)/10;
speed = speed>0? Math.ceil(speed):Math.floor(speed);
if(currentwidth == Itarger){
clearInterval(obj.timer);
}else{
obj.style.width = currentwidth + speed +"px";
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
<body>
<ul>
<li>条目一</li>
<li>条目二</li>
<li>条目三</li>
<li>条目四</li>
</ul>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/android-er/p/5595394.html
