html07

1.复习
js的外部对象，DOM，BOM
BOM
window
-location -Location对象 : href reload()
-history -History :back() forward() go(index)
-screen -width availWidth
-navigator -userAgent
-document
DOM
1)查找节点
byID 返回单个节点 没找到 -null
ByTagname 返回集合 -[]
byName 集合
子节点：parentNode -父节点
父节点：childNodes -子节点
querySelector(选择器) - 单个节点
querySelectorAll - 多个节点
单个没找到，返回null，多个没找到返回空数组[]
2)读取+修改
读内容，读值
ele.innerText : 获取双标记中的文本
ele.innerHTML : 获取双标记中的html
该内容
ele.innerText=值 :
ele.innerHTML=值 :
读属性
ele.属性名（注意是否支持）
ele.getAttribute(属性名)
改属性
ele.属性名=值
ele.setAttribute(属性名，值);

================================================
1.综合练习：表单的验证

2.DOM操作
1）增加节点
* 通过属性给页面添加节点
ele.innerHTML="HTML代码"
* 通过方法给页面添加节点
a,新建节点
document.createElement(节点名称);
如：var divEle=document.createElement("div");
divEle.innerHTML=值；
b,添加新节点到指定位置
父节点.appendChild(新节点);
如：父节点.appendChild(divEle);
父节点.insertBefore(新节点,旧节点);//插入的新节点时在父节点的旧节点的前面
**
通过js添加的元素，可以被js找到
但是要注意先后顺序（先添加，再查找）
**
2）删除节点
父节点.removeChild(删除的节点);

//练习：省市，二级联动

3.事件
1）事件是指页面的元素状态方法改变，所触发的动作
鼠标事件
单机事件：onclick
双击事件：ondblclick
鼠标移入：onmouseover
鼠标移开：onmouseout
键盘事件
键盘按下： onkeydown
键盘松开： onkeyup
状态事件 （状态改变）
选择： onchange (单选 复选 下拉列表)
失去焦点： onblur
获取焦点： onfocus
表单提交： onsubmit

2）事件的定义
* 元素上添加对应的事件属性
如： <input onblur="函数">
* 在js中
元素.时间名=function(){}

元素.事件名=函数名
function 函数名（）{}

3）event
任何事件触发之后都会产生1个event对象
event记录事件发生时鼠标位置 按键的状态
触发对象等信息

事件冒泡:若子节点和父节点有相同的事件，若子节点触发事件时，会向上触发父节点的同名事件
取消事件冒泡：event.cancelBubble=true;

========================================
js中的自定义对象
{}：对象 多个属性用逗号隔开
形式1
var user={
"name":"zs",
"age":34,
"sayHello":function (){
var info="我是"+this.age+"岁的"+this.name;
alert(info);
}
};
user.sayHello();

形式2：
//类似于构造函数
function UserModel(){
this.name="";
this.age=0;
}
//创建对象
var lisi=new UserModel();
lisi.name="lisa";
lisi.age=54;
console.log(lisi);