js 的DOM操作 2017-03-21
DOM（document object model）
文档对象模型
BOM(browse object model)
针对浏览器（如：弹出的窗口，滚动条等）
一、操作对象(注意大小写；注意element是否加s)
1、id选择器（id具有唯一性，所以只有一个）
格式：document.getElementById("id的名称")
Eg1:
<div id="a"></div>
document.getElementById("a").innerHTML = "啦啦";
注：. innerHTML 相当于属性； 将内容“啦啦”写入div中。
Eg2:
var b= document.getElementById("a");
alert(b.innerHTML);
获取div中html的内容。
2、class选择器 (根据class找，会得到一个数组)
格式：document.getElementsByClassName("class的名称")
Eg:
<div class=”a”></div>
<div class=”a”></div>
var x = document.getElementsByClassName("a");
alert(typeof(a)); -----------判断a的类型
a[0].innerHTML = "嘿嘿"; -------------在第一个div中显示“嘿嘿”
a[1].innerHTML = "哈哈";------------在第二个div中显示“哈哈”
如果div个数很多，可以用数组进行：
for(var i = 0 ;i<a.length;i++)
{
a[i].innerHTML += "略略";
}
显示效果：在第一个div中显示“嘿嘿略略”； 在第二个div中显示“哈哈略略”；
3、标签选择器（会得到一个数组）
格式：document.getElementsByTagName("class的名称")
Eg:
document.getElementsByTagName("div")[0].innerHTML += "耶耶”;
显示效果： 凡是div标签，输出内容都会加上耶耶后，再输出。
4、 name选择器（会得到一个数组）
格式：document.getElementsByName("class的名称")
Eg:
<input name=”a” type=”text”>
document.getElementsByName("a")[0].value = "哒哒";--------文本框中输出哒哒
var y = document.getElementsByName("a")[0].value;
alert(y);
eg:
<div id="a"></div>
<input type="button" onclick="btn()" />
function btn(){
var x = document.getElementById("a");
x.innerHTML += "嘻嘻";
}
显示效果：每点击一次，div中会多一个嘻嘻。
二、操作内容
Eg:
<div id="a"></div>
document.getElementById("a").innerHTML = "<b>哈哈</b>";
-------哈哈加粗显示
document.getElementById("a").innerText = "<b>哈哈</b>";
-------会显示<b>哈哈</b>
原因： 第一个标签可读；第二个标签不可读。
三、操作属性
<div id="a"></div>
Var x= document.getElementById("a");
1、a. setAttribute(“属性名”，”属性值”) ------用逗号隔开
用于设置属性，添加或更改
2、a. getAttribute(“属性名”)
用于获取属性的值
3、a. removeAttribute(“属性名”)
用于移除属性的值
四、操作样式
注意事项：
（1） js添加样式里，高宽用像素表示时，必须带有px；
（2） js样式操作输出时，只能读取用内联方式添加的样式或用js添加的样式;内嵌添加的方式读不出来
