String
属性length
方法
substr第几位往后几位
substring从哪到哪
Array
concat
join根据元素分割数组 ， - &
push添加元素，返回新的长度 当一个字符串，整体添加
pop删除元素，返回删除的元素
reverse
Date对象
java Date toLocalString()将date变成当前时间格式
getDay（） 获取星期0-6
getDate（） 得到当前的天
getHour
getMinutes
getSeconds
getTime 返回的是毫秒数 使用毫秒数处理缓存的效果（）
Math.randon()*10
js全局函数
eval 执行js代码如果字符串是js代码，直接执行
encodeURI decodeURI 编码解码
isNAN检查某个字符串是不是数字
parseInt类型转换
JS的重载
方法名相同，参数不同
不存在重载
但是可以通过其他方式模拟 argments数组
bom
浏览器对象模型
navigator 客户机的信息（浏览器的信息） appName
screen 屏幕信息
location href属性
history history.back history.forword history.go() -1或者1
window window.alert window.confirm prompt(,)输入对话框 open（地址，“”，宽高） close（浏览器兼容性差）
定时器setInterval(“js代码”，毫秒数) clearInterval
setTimeout()只会执行一次 clearTimeout
dom
文档对象模型
首先对文档的所有对象封装成模型
document对象
element对象
属性对象
文本对象
**Node对象 是这些对象的父对象
DHTML多项技术简称
document
write方法
getElementById 通过id得到元素
getElementsByName 得到是一个数组 如果只有一个可以通过数组下标获取值
安全级别高的浏览器，不可以访问本地文件
element对象
获取属性里面的值 getAttribute（属性名称）
设置属性里面的值 setAttribute
ctrl+F5 无缓存刷新
删除属性 removeAttribute 不能删除value
Node
childNodes 所有子标签
（element）查找其他节点唯一有效的方法getElementByTagName
属性：nodeName nodeType nodeValue
标签节点对应的值 nodeType 1
属性节点对应的值 nodeType 2
文本节点对应的值 nodetype 3
父节点 子节点 同辈节点
fiistChild第一个子节点
lastChild最后一个子节点
nextSibling下个兄弟节点
previousSibling上个兄弟节点
操作dom树
appendChild类似于剪切黏贴的效果
insertBefore(newNode,oldNode)在某个节点之前插入一个新的节点 要插入的节点 在谁之前插入
通过父类节点，再添加进去
没有insertAfter方法
removeChild
replaceChild
cloneNode
innerHTML属性获取标签内容，设置标签内容，可以是html代码
（先创建Date对象，然后调用toLocalString方法获得本地方法格式的时间，用innerHTML根据ID设置Element的内容，再使用Interval定时器，定时更新时间）
<html>
<head>
<title></title>
<style type="text/css"></style>
</head>
<body>
<div id ="div1"></div>
</body>
<script>
function getdate1(){
var date = new Date();
var d = date.toLocaleString();
var divv=document.getElementById("div1");
divv.innerHTML=d;
}
setInterval("getdate1();",1000);
</script>
</html>
案例练习，全选内容：
（利用input checkbox 的checked属性boolean值来获知checkbox的状态，改变checked属性来进行全选/全不选）
（getElementsByName得到的是一个数组，getElementById得到是一个元素，所以Element用的单数形式）
<html>
<head>
<title></title>
<style type="text/css"></style>
</head>
<body>
<input type="checkbox" id="chebox" onclick="selAll();"/>全选/全不选</br>
<input type="checkbox" name="love"/>
<input type="checkbox" name="love"/>
<input type="checkbox" name="love"/>
<input type="checkbox" name="love"/>
<input type="button" value="全选" onclick="selAll();"><input type="button" value="全不选" onclick="noSelAll();"><input type="button" value="反选" onclick="selOth();">
</body>
<script>
function selAll(){
var loves1 = document.getElementsByName("love");
for(var x =0;x<loves1.length;x++){
var love1 = loves1[x];
love1.checked=true;
}
}
function noSelAll(){
var loves2 = document.getElementsByName("love");
for(var x =0;x<loves2.length;x++){
var love2 = loves2[x];
love2.checked=false;
}
}
function selOth(){
var loves3=document.getElementsByName("love");
for(var x =0;x<loves3.length;x++){
var love3 = loves3[x];
if(love3.checked){
love3.checked=false;
}else{
love3.checked=true;
}
}
}
</script>
</html>
下拉列表左右选择
select multiple属性
selected
（getElementsByTagName方法的对象应该是一个元素Element，不是document，同样获取的是一个数组。所以得到的一个子元素的对象）
<html>
<head>
<title></title>
<style type="text/css"></style>
</head>
<body>
<div style="float:left;">
<select id="sel1" multiple="true" style="width:100px;height:100px;">
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
<option>DDDD</option>
<option>EEEE</option>
</select>
<div>
<input type="button" value="扔到右边" onclick="right();"/></br>
<input type="button" value="全部扔到右边" onclick="rightAll();">
</div>
</div>
<div>
<select id="sel2" multiple="true" style="width:100px;height:100px;">
<option>QQQQ</option>
</select>
<div>
<input type="button" value="扔到左边"onclick="left();"/></br>
<input type="button" value="全部扔到左边"onclick="leftAll();">
</div>
</div>
</body>
<script>
function right(){
var select1=document.getElementById("sel1");
var select2=document.getElementById("sel2");
var opts1=select1.getElementsByTagName("option");
for(var i=0;i<opts1.length;i++){
var opt1= opts1[i];
if(opt1.selected){
select2.appendChild(opt1);
i--;
}
}
}
function left(){
var select1=document.getElementById("sel1");
var select2=document.getElementById("sel2");
var opts2=select2.getElementsByTagName("option");
for(var i=0;i<opts2.length;i++){
var opt2= opts2[i];
if(opt2.selected){
select1.appendChild(opt2);
i--;
}
}
}
function rightAll(){
var select1=document.getElementById("sel1");
var select2=document.getElementById("sel2");
var opts1=select1.getElementsByTagName("option");
for(var i=0;i<opts1.length;i++){
var opt= opts1[i];
select2.appendChild(opt);
i--;
}
}
function leftAll(){
var select1=document.getElementById("sel1");
var select2=document.getElementById("sel2");
var opts2=select2.getElementsByTagName("option");
for(var i=0;i<opts2.length;i++){
var opt= opts2[i];
select1.appendChild(opt);
i--;
}
}
</script>
</html>
省市联动
（option的value并不会显示到页面上，所以还要重复值，那么可以不使用中文作为value值。而且每次点击事件，传入的是option对应的value值，用this.value）
（利用一个2维数组，一维代表抽象的国家，二维元素代表城市，第一个元素作为国家，第二个开始遍历添加到第二个select窗中）
（删除元素，由于总的元素长度会变，遍历时需将步长还原，这样才可以保证每个元素都能遍历到）
<html>
<head>
<title></title>
<style type="text/css"></style>
</head>
<body>
<select id="select1" onclick="add1(this.value);" style="width:100;">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
<option value="德国">德国</option>
</select>
<select id="select2" style="width:100;"></select>
</body>
<script>
var arr = new Array(4);
arr[0]=["中国","长沙","株洲","湘潭","邵阳"];
arr[1]=["美国","纽约","洛杉矶","华盛顿","底特律"];
arr[2]=["日本","东京","名古屋","富士山","广岛"];
arr[3]=["德国","柏林"];
function add1(val){
var sel2=document.getElementById("select2");
var options2=sel2.getElementsByTagName("option");
for(var m=0;m<options2.length;m++){
var city2= options2[m];
sel2.removeChild(city2);
m--;
}
var sel1= document.getElementById("select1");
var options1=sel1.getElementsByTagName("option");
for(var i=0;i<arr.length;i++){
var city = arr[i];
if(city[0]==val){
for(var j=1;j<city.length;j++){
var cityName = city[j];
var cityOption = document.createElement("option");
var text = document.createTextNode(cityName);
cityOption.appendChild(text);
sel2.appendChild(cityOption);
}
}
}
}
</script>
</html>