1.获取Dom对象的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="show">这个是一个div</div> <ul> <li class="active">这个是一个列表1</li> <li class="active">这个是一个列表2</li> <li class="active">这个是一个列表3</li> <li class="active" name="liujianhong">这个是一个列表4</li> <li class="active">这个是一个列表5</li> <li class="active">这个是一个列表6</li> <li class="active">这个是一个列表7</li> <li class="active">这个是一个列表8</li> </ul> <input type="text" name="username" id="username" value="" /> <script type="text/javascript"> // 1、直接使用id获取对象，虽然很简单 // 但是这种写法对于程序员阅读理解有难度，不推荐使用 // console.info(show); // 2、利用api getElementById('标签的id') (必须掌握) var show = document.getElementById("show"); console.info(show) // show.innerHTML = "真帅！！"; // 3、使用类名称来获取对应的标签 (必须掌握) var acs = document.getElementsByClassName("active"); console.info(acs) // acs[0].innerHTML = "和哈"; // 4、通过标签名称 var divs = document.getElementsByTagName("div"); console.info(divs) // 5、通过name属性来获取对象 // 注意：该api主要用来获取表单对象 var unames = document.getElementsByName("username"); console.info(unames) </script> </body> </html>2.操作DOM对象
<div id="box">嘿嘿，这个是一个光荣的div标签<span>这个是span中的内容</span></div> <script type="text/javascript"> var box = document.getElementById("box"); // console.info(box) // innerHTML 获取DOM对象的子标签及文本内容 // console.info(box.innerHTML) // box.innerHTML = "<b style='color: royalblue;'>大帅哥</b>" // 只获取文本内容，包括子标签的文本内容，但是 // 注意：不要去子标签本身 // console.info(box.innerText); // box.innerText = "大帅哥" // box.innerText = "<b style='color: royalblue;'>大帅哥</b>" box.textContent = "<b style='color: royalblue;'>大帅哥</b>"; </script>3.操作DOM对象的属性
<body> <div id="show" title="这个是一个标题">这个是一个div</div> <script type="text/javascript"> var show = document.getElementById("show"); // 1、面向对象的方式 // show.title = "新的标题"; // show.style.color = "red"; // 2、数组的方式 // show['title'] = "新的标题"; // 3、JavaScript提供的专门用来操作属性的API // alert(show.getAttribute("title")); // show.setAttribute("title", "这个是一个新的值1"); // 注意：class属性的操作的时候使用的className这个属性。 show.className = "a"; </script> </body>4.操作DOM对象的样式
<body> <div id="show" class="show" style="height: 50px;"></div> <div id="box" class="box" onclick="run()"></div> <script> // var div = document.getElementById("show"); // // // DOM对象.style.样式名称只能拿到标签样式 // var h = show.style.height; console.info(h) console.info(typeof(h)) // // var w = show.style.width; // console.info(w) // // // 使用getComputedStyle才能拿到任意的样式值 // let w2 = getComputedStyle(div).width; // console.info(w2) function run() { var box = document.getElementById("box"); // var h = getComputedStyle(box).height; // var w = getComputedStyle(box).width; // // // 去掉单位 // h = parseInt(h); // w = parseInt(w); // box.style.width = h + 10 + "px"; // box.style.height = w + 10 + "px"; // JavaScript专门提供用来操作宽和高的api，获取是没有单位的数值 var h = box.offsetHeight; var w = box.clientWidth; box.style.width = h + 10 + "px"; box.style.height = w + 10 + "px"; } </script> </body>
