js操作dom对象学习笔记一之div显示与隐藏
把一个html文件看成是一个文档，由于万物皆对象，所以把这个文档看成一个对象。
html文件看成一个文档，那么这个文档看成一个对象，文档中的所有的标签都可看成一个对象
页面中的每个标签，都是一个元素(element)，每个元素都可以看成一个对象
html页面中都有一个根标签---html--也叫根元素
文档: 一个页面就算一个文档;
元素(element): 页面中的所有的标签都是元素，元素可以看成是对象;
节点(node): 页面中所有的内容都是节点：标签，属性，文本;
根结点(root): 根结点;
1.根据id获取元素
<p>document.getElementById("btn");</p><p>document.getElementById("btn").οnclick=function(){</p><p> alert("弹框了");</p><p>}</p><p><input type="button" value="弹框" id="btn"/></p>凡是成对的标签，中间的文本内容，设置的时候，都使用 innerText 这个属性的方式
点击按钮，修改 <p> 标签的显示内容
<p>document.getElementById("btn").οnclick=function(){</p><p> document.getElementById("p1").innerText="这是一个p";</p><p>}</p><p><input type="button" value="设置p的内容" id="btn"/></p><p><p id="p1">我是一个p标签</p></p>
2.用名称获取结点
document.getElementsByTagName("标签的名字");
返回的是一个伪数组，无论是获取一个标签还是多个标签，最终都是在数组中存储的，返回的是一个数组
在某个元素的事件中，自己的事件中的this就是当前的这个元素的对象
案例，排他功能
<p><!--html部分--></p><p><input type="button" value="没怀孕"/></p><p><input type="button" value="没怀孕"/></p><p><input type="button" value="没怀孕"/></p><p><input type="button" value="没怀孕"/></p><p><input type="button" value="没怀孕"/></p><p><input type="button" value="没怀孕"/></p>
<p>//JS部分</p><p>//获取所有按钮，分别注册点击事件</p><p>var btnObj=document.getElementsByTagName("input");</p><p>//循环遍历所有的按钮</p><p>for(var i=0;i<btnObj.length;i++){</p><p> //为每个按钮注册点击事件</p><p> btnObj.οnclick=function(){</p><p> //把所有按钮的value值设为默认值，需要在遍历一次</p><p> for(var j=0;j<btnObj.length;j++){</p><p> btnObj.value="没怀孕";</p><p> }</p><p> //当前被点击的按钮设置为:怀孕了</p><p> this.value="怀孕了";</p><p> }</p><p>}</p>
3.控制单向选择与多项选择
在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么
在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了
点击按钮修改性别
<p><!--html部分--></p><p><input type="button" value="修改性别" id="btn1"/></p><p><input type="radio" value="1" name="sex"/>男</p><p><input type="radio" value="2" name="sex" id="rad1"/>女</p><p><input type="radio" value="3" name="sex"/>保密</p>
<p>//JS部分</p><p>function my$(id) {</p><p> return document.getElementById(id);</p><p>}</p><p>my$("btn1").onclick = function () {</p><p> my$("rad1").checked = true;</p><p>};</p>
4.控制结点上的css样式属性;
注意 : 凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可
点击按钮修改div宽、高、背景颜色
<p><!--html部分--></p><p><input type="button" value="div" id="btn"/></p><p><div id="dv"></div></p>
<p>//JS部分</p><p>function my(id){</p><p> return document.getElementById(id);</p><p>}</p><p>my("btn").οnclick=function(){</p><p> my("dv").style.width="300px";</p><p> my("dv").style.height="200px";</p><p> my("dv").style.backgroundColor="pink";</p><p>}</p>
5.js控制div的显示或隐藏
document.getElementById("div1").style.display="block";//显示
document.getElementById("div2").style.display="none";//隐藏
点击按钮显示和隐藏
<p>/*CSS部分*/ </p><p>div{</p><p> width:300px;</p><p> height:200px;</p><p> background-color:pink;</p><p>}</p>
<p><!--html部分--></p><p><input type="button" value="隐藏" id="btn"/></p><p><div id="dv"></div></p>
<p>//JS部分</p><p>function my(id){</p><p> return document.getElementById(id);</p><p>}</p><p>my("btn").οnclick=function(){</p><p> if(my("btn").value=='显示'){</p><p> my("dv").style.display="block";</p><p> this.value="隐藏";</p><p> }else if(my("btn").value=='隐藏'){</p><p> my("dv").style.display="none";</p><p> this.value="显示";</p><p> }</p><p>}</p>
6.JS操作结点替换class参数;
js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
<p>//JS部分</p><p>document.getElementById("结点ID").className="cls";</p>
<p>/*CSS部分*/</p><p>.cls{</p><p> width:300px;</p><p> height:200px;</p><p> background-color:yellow;</p><p> border:2px solid red;</p><p>}</p>
页:
[1]