html07

时间:2022-05-17 23:34:14

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);

相关文章