JS的DOM操作语法
Posted 打点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS的DOM操作语法相关的知识，希望对你有一定的参考价值。
整理了一下JS的DOM操作语法，这里记录一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js的DOM操作</title> 6 <style type="text/css"> 7 .dvClass{ 8 width: 300px; 9 height: 400px; 10 background-color: red; 11 } 12 13 .divHide{ 14 width: 500px; 15 height: 300px; 16 background-color: red; 17 margin: 0 auto; 18 } 19 20 .divBorder{ 21 width: 200px; 22 height: 150px; 23 float: left; 24 border: 1px solid #000; /*#000是黑色*/ 25 margin-left: 20px; 26 text-align: center; 27 line-height: 165px; 28 font-size: 19px; 29 } 30 31 #querySel{ 32 33 } 34 </style> 35 </head> 36 <body> 37 <input type="button" value="确定" id="btn"> 38 <input type="button" value="确定"> 39 <input type="button" value="确定"> 40 41 <div id="dv">你好</div> 42 <div id="dv3"><p>新年好</p></div> 43 <div>大家好</div> 44 45 <img src="" id="picture"> 46 47 <img src="desk.jpg" id="picture2"> 48 49 <a href="desk.jpg" id="aid"><img src="deskSmall.jpg" id="srcid"></a> 50 51 <div class="divHide" id="dv2"></div> 52 <input type="button" value="显示" id="show"> 53 <input type="button" value="隐藏" id="hide"> 54 <input type="button" value="隐藏" name="" id="showAndHide"> 55 56 <input type="text" name="" id="tx"> 57 <input type="button" name="" value="只读" id="btn1"> 58 59 <a href="www.baidu.com" id="a1">百度</a> 60 61 <ul id="ul1"> 62 <li>隔行变色</li> 63 <li>隔行变色</li> 64 <li>隔行变色</li> 65 <li>隔行变色</li> 66 </ul> 67 <hr> 68 <ul> 69 <li>隔行变色</li> 70 <li>隔行变色</li> 71 <li>隔行变色</li> 72 <li>隔行变色</li> 73 </ul> 74 <input type="button" name="" value="点击变色" id="btn2"> 75 76 <ul id="ul2"> 77 <li>隔行变色</li> 78 <li>隔行变色</li> 79 <li>隔行变色</li> 80 <li>隔行变色</li> 81 </ul> 82 83 <div class="divBorder">111</div> 84 <div class="divBorder">222</div> 85 <div class="divBorder">333</div> 86 87 <input type="text" name="" value="请输入内容" id="getFocus"> 88 89 <div id="querySel">12345</div> 90 <input type="button" name="" value="选择器获取元素" id="btn3"> 91 92 <div>aaa</div> 93 <div>bbb</div> 94 <div>ccc</div> 95 <input type="button" name="" value="setAttribute" id="setAtt"> 96 97 <div id="dv4"> 98 <p id="p1">11</p> 99 <span>22</span> 100 <ul> 101 <li>33</li> 102 <li>44</li> 103 <li>55</li> 104 </ul> 105 </div> 106 <input type="button" name="" value="创建" id="create"> 107 108 <div id="uu"></div> 109 <input type="button" name="" value="创建" id="create2"> 110 111 <div id="delDiv"> 112 <p>11</p> 113 <span>22</span> 114 <p>33</p> 115 <span>中国</span> 116 </div> 117 <input type="button" name="" value="删除" id="del"> 118 119 <script type="text/javascript"> 120 /*获取元素对象的方法*/ 121 document.getElementById("id的值"); 122 document.getElementsByTagName("标签名"); //返回的是数组 123 document.getElementsByTagName("name的值"); //返回的是数组 124 document.getelementsByClassName("class的值"); //返回的是数组 125 document.getElementById("btn3").onclick=function(){ 126 var obj=document.querySelector("#querySel"); //根据选择器名（id选择器、类选择器）获取元素，并给元素内属性赋值 127 obj.style.width="300px"; 128 obj.style.height="200px"; 129 obj.style.backgroundColor="red"; 130 } 131 132 133 134 /*鼠标点击事件*/ 135 //点击按钮，弹出对话框 136 var btnClick=document.getElementById("btn"); //通过document.getElementById()方法返回一个document对象，getElementById("btn")的作用是找到值为btn的id 137 btnClick.onclick=function(){ //定义一个点击事件 138 alert("hello world!"); //弹出框 139 } 140 141 //点击按钮，通过标签id，改变div标签里面的内容 142 document.getElementById("btn").onclick=function(){ 143 document.getElementById("dv").innerText="你好，世界"; 144 //document.getElementById("dv3").innerText="新年好啊"; //因为dv3的内容是写在p标签里的，所以不能用innerText，否则p标签会消失 145 document.getElementById("dv3").innerHTML="新年好啊啊啊"; 146 } 147 148 //点击按钮，通过标签id，改变div标签的样式 149 document.getElementById("btn").onclick=function(){ 150 //第1种方法 151 var obj=document.getElementById("dv"); 152 obj.style.width="300px"; 153 obj.style.height="300px"; 154 obj.style.backgroundColor="#000"; //#000是黑色 155 obj.style.marginTop="20px"; //设置div上边距为20px 156 157 //第2种方法（通过将标签的class属性，改成style里面的类选择器名） 158 obj.className="dvClass"; //这里可以同时赋多个className，用空格分隔，比如obj.className="dvClass dvClass2"; 159 } 160 161 //点击按钮，通过标签id，在img标签里，显示图片 162 document.getElementById("btn").onclick=function(){ 163 document.getElementById("picture").src="desk.jpg"; 164 } 165 166 //点击图片，通过this关键字，改变img标签里，图片的宽和高 167 document.getElementById("picture2").onclick=function(){ 168 this.width="300"; //图片的长宽比较特殊，所以不加px 169 this.height="300"; 170 } 171 172 //点击按钮，通过标签名字，获取到所有标签 173 document.getElementById("btn").onclick=function(){ 174 var arr=document.getElementsByTagName("div"); //因为标签可能重复，所以通过标签名字获取到的是数组形式 175 for(var i=0;i<arr.length;i++){ 176 arr[i].innerText="全部改变"; 177 } 178 } 179 180 //点击按钮，通过标签id，和this关键字，改变按钮的内容 181 document.getElementById("btn").onclick=function(){ 182 this.value="点击"; 183 } 184 185 //排他功能（即点击按钮后，按钮内容改变，再点击其他按钮，已经改变的按钮内容恢复） 186 var arr=document.getElementsByTagName("input"); //通过标签名字获取到的是数组 187 for(var i=0;i<arr.length;i++){ 188 arr[i].onclick=function(){ 189 for(var j=0;j<arr.length;j++){ 190 arr[j].value="确定"; 191 } 192 this.value="点击"; 193 } 194 } 195 196 //点击超链接，使图片不在新页面打开，而在当前页面打开 197 document.getElementById("srcid").onclick=function(){ 198 this.src=document.getElementById("aid").href; 199 return false; //必须要有这个 200 } 201 202 //点击两个按钮，显示和隐藏div 203 document.getElementById("hide").onclick=function(){ 204 document.getElementById("dv2").style.display="none"; 205 } 206 document.getElementById("show").onclick=function(){ 207 document.getElementById("dv2").style.display="block"; 208 } 209 210 //点击一个按钮，显示和隐藏div 211 document.getElementById("showAndHide").onclick=function(){ 212 if(this.value=="隐藏"){ 213 document.getElementById("dv2").style.display="none"; 214 this.value="显示"; 215 }else if(this.value=="显示"){ 216 document.getElementById("dv2").style.display="block"; 217 this.value="隐藏"; 218 } 219 } 220 221 //点击“只读”按钮，让文本框不可编辑 222 document.getElementById("btn1").onclick=function(){ 223 document.getElementById("tx").disabled=true; 224 } 225 226 //点击超链接，禁止跳转到链接的界面 227 document.getElementById("a1").onclick=function(){ 228 return false; //这句是禁止跳转的功能 229 } 230 231 //列表各行变色 232 document.getElementById("btn2").onclick=function(){ 233 var arr=document.getElementById("ul1").getElementsByTagName("li"); //只要第一个列表中的行变色 234 for(var i=0;i<arr.length;i++){ 235 if(i%2==0){ 236 arr[i].style.backgroundColor="red"; 237 } 238 } 239 } 240 241 242 243 /*鼠标悬停和离开事件*/ 244 //鼠标移到行上，行的颜色改变 245 var arr=document.getElementById("ul2").getElementsByTagName("li"); 246 for(var i=0;i<arr.length;i++){ 247 arr[i].onmouseover=function(){ //鼠标悬停事件 248 this.style.backgroundColor="red"; 249 } 250 251 arr[i].onmouseout=function(){ 252 this.style.backgroundColor="#FFF"; //鼠标离开事件，#FFF是白色 253 } 254 } 255 256 //div边框高亮显示 257 var arr=document.getElementsByTagName("div"); 258 for(var i=0;i<arr.length;i++){ 259 arr[i].onmouseover=function(){ 260 this.style.border="1px solid red"; 261 } 262 arr[i].onmouseout=function(){ 263 this.style.border="1px solid #000"; 264 } 265 } 266 267 268 269 /*获取焦点和失去焦点事件*/ 270 //获取到焦点，使文本框内容消失 271 document.getElementById("getFocus").onfocus=function(){ 272 if(this.value=="请输入内容"){ //防止已经输入内容，再次修改时，内容被清空 273 this.value=""; 274 } 275 } 276 277 // //失去焦点，使文本框内容恢复 278 document.getElementById("getFocus").onblur=function(){ 279 if(this.value==""){ //避免输入内容后，失去焦点，输入的内容被清空 280 this.value="请输入内容"; 281 } 282 } 283 284 285 286 /*标签属性*/ 287 document.getElementById("setAtt").onclick=function(){ 288 //设置属性 289 document.getElementsByTagName("div")[0].setAttribute("class","divBorder"); //[0]代表返回数组中的第一个元素，setAttribute里面分别是属性名和属性值 290 //获取属性 291 var obj=document.getElementsByTagName("div")[0].getAttribute("class"); //getAttribute里面填属性名就返回属性值，填属性值就返回属性名，没有就返回null 292 alert(obj); 293 //删除属性 294 document.getElementsByTagName("div")[0].removeAttribute("class"); 295 } 296 297 298 299 /*节点 300 类型：nodeType，值1为标签节点，2为属性节点，3为文本节点 301 名字：nodeName，大写的标签名——标签类型，小写的属性名——属性类型，#text——文本类型 302 节点的值：nodeValue，null——标签类型，属性值——属性类型，文本内容——文本类型*/ 303 //获取标签的父节点 304 var obj=document.getElementById("p1").parentNode; //获取父节点 305 console.log(obj); //输出<div id="dv4">，说明P1所在标签的父元素为<div> 306 console.log("节点的类型："+obj.nodeType+"，节点的名字："+obj.nodeName+"，节点的值："+obj.nodeValue); 307 308 //获取父级元素 309 console.log(document.getelement("dv4").parentElement); 310 311 //获取子节点 312 var obj1=document.getElementById("dv4").childNodes; //返回的是数组 313 console.log(obj1); //输出：NodeList(7) [ #text, p#p1, #text, span, #text, ul, #text ]，所以一共有7个节点 314 315 //获取第一个子节点 316 console.log(document.getelement("dv4").firstChild); 317 318 //获取最后一个子节点 319 console.log(document.getelement("dv4").lastChild); 320 321 //获取子元素 322 var obj2=document.getElementById("dv4").children; 323 console.log(obj2); //HTMLCollection { 0: p#p1, 1: span, 2: ul, length: 3, … }，所以一共有3个子元素 324 325 //获取第一个子元素 326 console.log(document.getElementById("dv4").firstElementChild); 327 328 //获取最后一个子元素 329 console.log(document.getElementById("dv4").lastElementChild); 330 331 332 333 /*创建标签*/ 334 //方法1 335 document.getElementById("create").onclick=function(){ 336 document.write("<p>增加的标签</p>"); //这种方式会将html里面其他标签都清空，只留这个增加的 337 } 338 339 //方法2 340 document.getElementById("create").onclick=function(){ 341 document.getElementById("dv4").innerHTML="<p>哈哈哈哈</p>"; //这种方式会将dv4所在标签内的，子标签都清空，只留增加的 342 } 343 344 //方法3 345 document.getElementById("create").onclick=function(){ 346 var obj=document.createElement("p"); //先创建一个p标签 347 document.getElementById("dv4").appendChild(obj); //然后添加，这种方式不清空之前的标签，只增加 348 } 349 350 //创建图片标签 351 document.getElementById("create").onclick=function(){ 352 document.getElementById("dv4").innerHTML="<img src=desk.jpg/>"; 353 } 354 355 //根据数组创建列表标签 356 document.getElementById("create2").onclick=function(){ 357 var arr=["新闻标题1","新闻标题2","新闻标题3","新闻标题4","新闻标题5","新闻标题6"]; 358 var str="<ul>"; 359 for(var i=0;i<arr.length;i++){ 360 str+="<li>"+arr[i]+"</li>"; 361 } 362 str+="</ul>"; 363 document.getElementById("uu").innerHTML=str; 364 } 365 366 367 368 /*删除元素*/ 369 document.getElementById("del").onclick=function(){ 370 document.getElementById("delDiv").removeChild(document.getElementById("delDiv").firstElementChild); //删除第一个元素 371 document.getElementById("delDiv").removeChild(document.getElementById("delDiv").lastElementChild); //删除第一个元素 372 } 373 </script> 374 </body> 375 </html>
。
以上是关于JS的DOM操作语法的主要内容，如果未能解决你的问题，请参考以下文章
认识JQuery，JQuery的优势语法多库冲突JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法