dom学习要点
Dom操作
1.文本内容操作
- innerText：操作文本
- innerHtml：操作全内容
//innerText标签： <div id='i2' ><a>土味程序员</a></div> item=document.getElementById('i2');
item.innerText; 结果："土味程序员"
item.innerHTML; 结果："<a>土味程序员</a>"
innerText的作用是获取文本内容，而innerHTML的作用则连标签一起获取(全内容)。
赋值的方式item.innerText="程序员"；item.innerHTML="<p>程序员</p>"；
注意innerHTML可以修改标签。
- value：
- input ：获取当前标签的值
- select：获取选中的value值
select：获取选中的value值 - textarea：获取当前标签值
//input 标签，获取input标签中文本框输入的值，同时也可以赋值； <input id="i1" type="text" value="user"> item=document.getElementById("i1"); item.value; "wag" item.value="程序员"; "程序员" //select标签selectedIndex；则是获取逻辑顺序； item=document.getElementById("i2"); <select id="i2"> <option value="11">北京</option> <option value="12">上海</option> <option value="13">福州</option> </select> item.value; 结果："13" item.value; 结果 ："11" item.value=13; item.selectedIndex; 结果：2 item.selectedIndex; 结果：0 //textarea标签 item=document.getElementById("i3") <textarea id="i3">ndioansdian</textarea> item.value; 结果： "ndioansdian" item.value="chengxuyuan"; 结果"chengxuyuan"
例子：请输入关键字；
<div> <input id ='i1' type="text" onfocus="Focus();" onblur="Blur();" value="请输入关键字" /> </div> <script type="text/javascript"> function Focus() { item=document.getElementById("i1"); if(item.value=="请输入关键字") { item.value=""; } } function Blur(){ item=document.getElementById("i1"); if(item.value.length==0) { item.value="请输入关键字"; } } </script>
2.样式操作：
- classList 样式级操作
- classList.add(class)
- classList.Remove(class)
- style属性级操作
两种方式都可以操作属性，classList用于操作量级大于style，蒙蔽？请看以下例子(控制台console操作执行)
//classList操作 <div id="i2" class="c1 c2 " style="font-size:35px;">土味程序员</div> item = document.getElementById("i2"); item.classList; 结果：DOMTokenList(2) ["c1", "c2", value: "c1 c2 "] item.classList.add("c3"); 结果：undefined item.classList; 结果：DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"] item.classList.remove("c3"); 结果：undefined item.classList; 结果：DOMTokenList(2) ["c1", "c2", value: "c1 c2"] //style操作 item.style.color="red"; 结果："red" item.style.color="blue"; 结果："blue" item.style.fontSize="16px"; 结果："16px" //需要注意的是在html中字体大小的写法是：font-size；而在javascript中则是fontSize；
3.属性操作
- attribute
- setAttribute 为标签添加某个属性，没有该属性则创建该属性
- removeAttribute 删除标签的某个属性
- attributes 查询标签的所有属性
请看例子：
item=document.getElementById("i2");
输出：<div id="i2" class="c1 c2 " style="font-size:40px;">土味程序员</div>
item.removeAttribute("style");
输出：undefined
item;
<div id="i2" class="c1 c2 ">土味程序员</div>
输出：item.setAttribute("style","color:blue;")
undefined
item;
输出：<div id="i2" class="c1 c2 " style="color:blue;">土味程序员</div>
item.attributes;
输出：NamedNodeMap {0: id, 1: class, 2: style, id: id, class: class, style: style, length: 3}
属性包括:id,class,style,value,name......
4.标签的创建
标签的创建一般有以下两种形式：字符串创建和对象创建两种方式
- 字符串方式
字符串创建方式：标签字符串tag=；
插入方式位置有以下四种方式，如图：
- insertAdjacentHTML();方法
- 对象方式
- document.createElement('标签名');创建标签
- document.appendChild('标签名');插入某个标签
<input type="button" name="create" value="创建标签" onclick="create_tag();" /> <div id ="i1"> <input type="text" /> </div> <script type="text/javascript"> function create_tag(){ //创建input标签 var tag=document.createElement("input"); //为input标签，添加text属性 tag.setAttribute('type','text'); //为input标签添加属性字体大小为16px； tag.style.fontSize ='16px'; //创建标签P标签 var p=document.createElement("p"); //包裹tag标签 p.appendChild(tag); //为input标签包裹一层P标签 document.getElementById("i1").appendChild(p); }
5.提交表单
任何标签都可以通过JavaScript 来提交表单。
<body> <form id ="f1" action="http://www.baidu.com"> <!-- a标签 --> <a onclick="submitFrom();">我是a</a> <!-- div标签 --> <div onclick = "submitFrom();">我是div</div> </form> <script type="text/javascript"> function submitFrom(){ //提交表单 item=document.getElementById("f1").submit(); } </script> </body>
6.其他
- console.log()；输出框
- alert()；弹出框
- confirm(“真的需要删除吗”)；true fasle；确认框
- location
- locaiont.href；获取当前页面的ual
- location.href = " "；重定向，跳转
- location.href = location.href； 页面刷新
- location.href =location.reload()；页面刷新
7.事件操作
事件操作一般有以下几种方式：
1.直接标签绑定方式
<div id ='i1'> <input type='text' /> </div> <table id ='i2'> <thead> <tr> <th id ='i3' onmouseover="MouseOver('i3');" onmouseout="Mouseout('i3');">h</th> <th id ='i4' onmouseover="MouseOver('i4');" onmouseout="Mouseout('i4');">h</th> <th id ='i5' onmouseover="MouseOver('i5');" onmouseout="Mouseout('i5');">h</th> </tr> </thead> </table> <script> function MouseOver(id) { item=document.getElementById(id); item.style.backgroundColor = "red"; } function Mouseout(id) { item=document.getElementById(id); console.log(item); item.style.backgroundColor = ""; } </script>
2.先获取Dom对象，然后进行绑定
<div id ='i1'> <input type='text' /> </div> <table id ='i2'> <thead> <tr> <th>w</th> <th>w</th> <th>w</th> </tr> </thead> </table> <script> item=document.getElementById("i2"); //获取要修改的对象 child_tag = item.children[0].children[0].children; console.log(child_tag); for(var i=0;i<child_tag.length;i++) { //onmouseover事件，光标放在指定标签时，触发 child_tag[i].onmouseover=function(){ //谁调用onmouserover，this就指向谁 this.style.backgroundColor ="red"; } } for(var i=0;i<child_tag.length;i++) { //onmouseout事件，光标离开该标签时，触发 child_tag[i].onmouseout=function(){ this.style.backgroundColor ="" ; } } </script>
上述代码中this有两种绑定方式：
方法1
<div> <input type="button" onclick="clickOn(this)" /> </div> <script> function clickOn(self){ //self 代指当前点击的标签 } </script>
方法2
<input type='button' id='i1' /> <script type="text/javascript"> document.getElementById("i1").conlick= fucntion(){ //this 代指当前标签。。 }; </script>
3.通过addEventListener函数绑定
<div id='mymain' > <div id ='mycontent'> 土味程序员 </div> </div> <script> main = document.getElementById('mymain'); content= document.getElementById('mycontent'); main.addEventListener("click",function(){console.log('main');},false); content.addEventListener("click",function(){console.log('mycontent');},false); </script>
使用addEventListener函数来添加事件，第一个参数是事件，第二个参数是匿名函数，第三个参数是用做(冒泡/捕捉)的选择。默认是：false捕捉。
如果点击标签《土味程序员》，先打印‘main’后打印‘mycontent’ ，如果第三个参数为true，则先打印‘mycontent’后打印‘main’。
