Dom
动态改变页面内容
Dom是操作Html和xML一组API,可以实现动态页面的变化
Dom节点树:每个Html或Xml文档被浏览器加载会在内存中生成Dom树
div,p,h1叫做标签,现在叫做Dom对象,Dom节点,Dom元素
每个标签都是HtmlElement对象,形如HtmlxxxElement,例如div标签是HtmlDivElement对象
节点的三种类型:< div id=”div1” >我是div1
1.标签节点:div
2.属性节点:id=”div1”
3.文本节点:我是div1
增删改的代码如下:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/* 增加*/
function testAdd(){
var div5=document.createElement("div");
//创建标签节点
div5.id="div5";
//创建标签文本
var div5TextNode=document.createTextNode("我是div5");
div5.appendChild(div5TextNode);
var div3=document.getElementById("div3");
div3.parentNode.insertBefore(div5,div3);
}
//删除 删除div1
function testDele(){
var div1=document.getElementById("div1");
if(div1!=null){
div1.parentNode.removeChild(div1);
}else{
alert("null");
}
}
//修改:把div3修改成文本框
function testUpdate(){
var username=document.createElement("input");
username.type="text";
username.name="username";
username.id="username";
username.value="请输入用户名";
var div3=document.getElementById("div3");
div3.parentNode.replaceChild(username,div3);
}
</script>
</head>
<body>
<div id="div1">
我是标签1
</div>
<div id="div2">
我是标签2
</div>
<div id="div3">
我是标签3
</div>
<div id="div4">
我是标签4
</div>
<input type="button" name="bt1" id="bt1" value="增加div5" onclick="testAdd();">
<input type="button" name="bt2" id="bt2" value="删除div1" onclick="testDele();"/>
<input type="button" name="bt3" id="bt3" value="修改div3" onclick="testUpdate();"/>
</body>
</html>
牢记两个方法:document.createElement(“”) 创建元素节点
document,getElementById(id) 返回对拥有指定ID的第一个对象的引用
二、js库:一系列函数和对象的集合,别人写好了,直接拿来用,类似于java中的包
直接通过src=“路径”来引入js.js文件
三、Dom查询:根据id,name,class等查
1.id
document.getElementById(“”) ;
2.根据name查
document.getElementByName(“”);
3.根据标签名来查询元素的集合
document.getElementByTagName(“div”);
技能:得到标签文本:divArr[i].innerHTML.
4.得到所有标签
document.getElementByTagName(“*”);
5.根据class的值查询元素的集合:
docunment.getElementByClassName(“class1”);
window.οnlοad=function();相当于绑定事件处理函数
四、html中的dom编程
1.使用数组
document.image[0]…查询第一个img标签
document.links[0]….查询访问超链接
document.form[0]..查询第一个表单元素
2.访问表单中的表单域
可以根据表单域的name值或Id值进一步
document.form[0].username
document.form[0].username.value 都可以得到
注意:在此表单域的名称千万不可以起成submit,失效,如果写成的话,相当于动态的给表单对象加了一个属性叫submit,from,submit属性把form对象submint()方法给覆盖了,造成submit()方法失效
3.通过节点之间的关系查询
注意:如果< body>和< div > 中有空格隔开的话,第一个孩子节点是text(文本节点)
可以通过previoussibling来获取对应节点的下一个节点内容
五、得到、设置Dom的属性
和java中的setter和getter方法一样
1、html DOM
对象名.属性名
比如直接 img .src=”2.jpg”;
2、Core DOM
dom节点.getAttribute(“src”);//得到属性
dom节点.setAttribute(“src”,”mypicture2.jpg”);//设置属性
3. 对象名[“属性名”]
var aaa = “src”;
img1[aaa] = “../../img/23.jpg”;
六、单一修改模式
需求:修改DIV1的背景颜色改为绿色
div.style 得到css2properties对象
div.style.backgroundColor=”green”;
七、修改整套样式
div.class1{
width:800px;
height:700px;
}
div.class2{
width:900px;
height:800px;
}
var div1=document.getElementByClass(“class2”);
八、div的显示和隐藏
1.不占位
隐藏:div对象.style.display=”none”;
显示:div对象.style.display=”block”;
2.占位
隐藏:div对象.style.visibility=”hidden”;
显示:div对象.style.visibility=”visible”;
九、事件驱动编程
1.事件源:按钮
2.事件名称:onclick,onchange
3.事件处理函数:发生事件以后,执行的函数叫做事件处理函数
4.事件对象
常用的事件
1.文本框事件
onfocus(得到焦点) onblur(失去焦点)
2.鼠标事件
onmouseover鼠标悬停
onmouseout鼠标移出
十、绑定事件的三种方式
1.xhtml绑定方式
< input type=”button” name=”btn1” οnclick=”test();test2()”/ >
优点:写起来简单,绑定多个函数,可以传参
缺点:1.内容和行为没有分离2.多个按钮绑定多个事件,一个一个绑定。3.dom动态创建对象时,不能使用这种方式了
2.dom绑定方式
dom对象.事件=事件处理函数
function test(){ alert(“按钮被点击了”)}
window.οnlοad=function(){
var btn1=document.getElementById(“btn1”);
btn1.οnclick=test;
}
也可以直接写成”btn1.οnclick=function(){alert(“test”)}
立即调用匿名函数:(function(){alert(“test”)}();
优点:可以多个对象绑定事件
缺点:1.只能绑定一个事件
3.第三种绑定方式和两种事件模型
两种模型:1.Dom2事件模型 firefox 非ie浏览器传值这个模型
2.IE事件模型:ie浏览器
区别:
1.第三种绑定方式代码不一样
2.事件的传播机制不一样
《1》Dom2绑定方式
var btn1=dg(“btn1”);
btn1.addEventListener(“click”,test);
btn1.removeEventListener(“click”,test2);
《2》ie绑定方式
btn1.attachEvent(“click”,test);
btn1.detachEvent(“事件名称”,事件处理函数)