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中显示“嘿嘿”

divc[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添加的样式;内嵌添加的方式读不出来