JavaScript DOM（1）
1.DOM简介
DOM：文档对象模型，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。
1）获取元素：
根据Id获取元素：getElementById()
根据标签获取元素：getElementByTagName('标签名')
<body> <div id="one">你好哇！</div> <ul> <li>绿色</li> <li>红色</li> </ul> <ol id="ol"> <li>one</li> <li>two</li> </ol> <script> var Obox=document.getElementById('one'); console.log(Obox); var lis=document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); for(var i=0;i<lis.length;i++){ console.log(lis[i]); } var ol=document.getElementById('ol'); console.log(ol); console.log(ol.getElementsByTagName('li')); </script> </body>
根据name获取元素：getElementByName('')
<label><input type="checkbox" name="fruit" value="苹果">苹果</label> <label><input type="checkbox" name="fruit" value="西瓜">西瓜</label> ... var fruit_=document.getElementsByName('fruit'); fruit_[0].checked=true; console.log(fruit_[0]);
2)HTML5新增获取方式：
querySelector()：返回指定选择器的第一个元素对象、querySelectAll()：返回指定器的所有元素对象。
<ul> <li class="li">绿色</li> <li class="li">红色</li> </ul> <ol id="ol"> <li>one</li> <li>two</li> </ol> ... <script> var firstLi=document.querySelector('.li');//获取class方式 var ol_=document.querySelector('#ol');//获取id方式 var allLi=document.querySelectorAll('.li');//获取所有class为li的li var allol=document.querySelectorAll('li');//获取所有的li </script>
2.事件基础
（1）事件源：触发事件的元素（2）事件类型：如click事件（3）事件处理程序：事件触发后要执行的代码
<body> <input type="button" id="btn" value="一个测试按钮"> <script> var btn=document.getElementById('btn'); btn.onclick=function(){ alert('弹出'); } </script> </body>
3.操作元素
操作元素内容的常用属性：innerHTML、innerText、textContent
1）img元素的属性操作
2）表单input元素的属性操作
<body> <input type="button" id="btn" value="一个测试按钮"> <button id="flower">鲜花</button> <button id="grass">绿草</button> <img src="img/flower.jpg" alt="" title="鲜花"> <script>var flower=document.getElementById('flower'); var grass=document.getElementById('grass'); var img=document.querySelector('img'); flower.onclick=function(){ img.src='img/flower.jpg'; img.title="鲜花";
this.disabled="true"//点击一次后便禁用此按钮 }; grass.onclick=function(){ img.src="img/grass.jpg"; img.title="绿草";
this.disabled="true" }; </script> </body>
（还可通过设置flag值进行点击事件的切换）
3）操作元素样式：
1.操作style属性：background、backgroundColor、display...
2.操作className属性：通过变换类别来改变样式
相关技术应用：1).显示隐藏密码明文，2).通过点击相关内容切换不同样式等
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript DOM学习(1)</title> <style> .one{ background-color: brown; text-align: center; } .two{ background-color: blue; text-align: left; } </style> </head> <body> <p class="one" id="p">你好哇！</p> <button id="btn">切换按钮</button> <script> var page=document.getElementById('p'); var btn=document.getElementById('btn'); var flag=0; btn.onclick=function(){ if(flag==0){ page.className='two'; flag=1; }else{ page.className='one'; flag=0; } }; </script> </body>
