获取DOM对象的几种方式
1.直接通过id来获取
通过id来调取div
var_div=document.getElementById("one");
div.innerHTML = "这个getElementById获取的";
2.通过标签名称获取对应的标签
var_divs=document.getElementsByTagName("div");
console.info(_divs)
_divs[0].innerHTML = "啊啊这个是使用getElementById获取的";
3.通过class获取对应的标签
var_divs=document.getElementsByClassName("show");
console.info(_divs)
_divs[1].innerHTML = "是不是";
4.通过name属性获取对应的标签
使用场景只有form标签
var_name=document.getElementsByName("username")
console.info(_name)
_name[0].value = "因为爱情";
操作DOM对象的内容
1.innerHTML
_div.innerHTML = "<b>因为</b>爱情";
特点：innerHTML可以插入HTML片段，能够解析HTML文本
2.innerText
_div.innerText = "<b>因为</b>爱情";
特点：innerText不能解析HTML片段，只能插入文本内容。非w3c规定
3.textContent
_div.textContent = "<b>因为</b>爱情";
特点：textContent不能解析HTML片段，只能插入文本内容。w3c规定
操作DOM对象的属性
1..属性名称
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var _div = document.getElementById("show");
_div.title = "因为爱情";
}
</script>
</head>
<body>
<div id="show" class="msg" title="这个是很漂亮的标题" style="height: 30px;">
这个是div
</div>
</body>
</html>
2.获取class的时候 使用className来获取
var _title = _div.getAttribute("title");
console.info(_title)
3.数组的这种方式，一般用来获取id title属性，其他一般不用
_div["title"] = "这个是一个新的标题";
console.info(_div["style"])
_div.setAttribute("title","因为生活")
操作DOM的样式
获取样式的值（有单位）
1、行内样式：标签对象.style.样式名称
通过dom对象.style.样式属性 这种方式
只能获取行内样式，无法获取外联样式
console.info(_show.style.height);
2、getComputedStyle(标签对象).样式名称 【兼容IE9+】
针对于dom无法获取外联样式，w3c为大家提供了一个getComputedStyle
console.info(getComputedStyle(_show).width);
3、标签对象.currentStyle.样式名称 【低版本IE】
console.info(_show.currentStyle.width)
获取样式的数值（无单位，数字）
1.offsetHeight
获取样式对应值，注意：offsetHeight 获取的值包含边框
console.info(_show.offsetHeight)
2.clientHeight
获取样式对应值，注意：clientHeight 获取的值不包含边框
console.info(_show.clientHeight)
网友评论