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>