js操作dom对象学习笔记一之div显示与隐藏

墨裔

[DOM 文档对象模型]
把一个html文件看成是一个文档，由于万物皆对象，所以把这个文档看成一个对象。
html文件看成一个文档，那么这个文档看成一个对象，文档中的所有的标签都可看成一个对象
页面中的每个标签，都是一个元素(element)，每个元素都可以看成一个对象
html页面中都有一个根标签---html--也叫根元素

文档: 一个页面就算一个文档;
元素(element): 页面中的所有的标签都是元素，元素可以看成是对象;
节点(node): 页面中所有的内容都是节点：标签，属性，文本;
根结点(root): 根结点;

1.根据id获取元素

1. <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> 标签的显示内容

1. <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就是当前的这个元素的对象

案例，排他功能

1. <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>

复制代码

1. <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[i].οnclick=function(){</p><p>        //把所有按钮的value值设为默认值，需要在遍历一次</p><p>        for(var j=0;j<btnObj.length;j++){</p><p>            btnObj[j].value="没怀孕";</p><p>        }</p><p>        //当前被点击的按钮设置为:怀孕了</p><p>        this.value="怀孕了";</p><p>    }</p><p>}</p>

复制代码

3.控制单向选择与多项选择
在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么
在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了

点击按钮修改性别

1. <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>

复制代码

1. <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宽、高、背景颜色

1. <p><!--html部分--></p><p><input type="button" value="div" id="btn"/></p><p><div id="dv"></div></p>

复制代码

1. <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";//隐藏

点击按钮显示和隐藏

1. <p>/*CSS部分*/   </p><p>div{</p><p>    width:300px;</p><p>    height:200px;</p><p>    background-color:pink;</p><p>}</p>

复制代码

1. <p><!--html部分--></p><p><input type="button" value="隐藏" id="btn"/></p><p><div id="dv"></div></p>

复制代码

1. <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

1. <p>//JS部分</p><p>document.getElementById("结点ID").className="cls";</p>

复制代码

1. <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>

复制代码