DOM对象简介
一、DOM对象
DOM,全称“Document Object Model(文档对象模型)”,它是由W3C组织定义的一个标准。
在前端开发时,我们往往需要在页面某个地方添加一个元素或者删除元素,这种添加元素、删除元素的操作就是通过DOM来实现的。
DOM就是一个接口,我们可以通过DOM来操作页面中各种元素,例如添加元素、删除元素、替换元素等。
DOM就是文档对象模型,文档对象模型就是DOM。
二、DOM结构
DOM采用树形结构作为分层结构,以树节点形式表示页面中各种元素或内容。
举例:
<html>
<head>
<title><title>
<body>
<h1>绿叶学习网</h1>
<p>绿叶学习网成立于……</p>
</body>
</html>
上面这个HTML文档使用DOM树形结构解析为:
DOM树形结构
在DOM中,每一个元素看成一个节点,而每一个节点就是一个“对象”。也就是我们在操作元素时,把每一个元素节点看成一个对象,然后使用这个对象的属性和方法进行相关操作。
下面我们介绍几个关于节点的概念。
1、根节点
在HTML文档中,html就是根节点。
2、父节点
一个节点之上的节点就是该节点的父节点,例如h1的父节点就是body,body的父节点就是html。
3、子节点
一个节点之下的节点就是该节点的子节点,例如h1就是body的子节点。
4、兄弟节点
如果多个节点在同一层次,并拥有相同的父节点,那么这几个节点就是兄弟节点。
DOM对象节点属性
属性 说明
parentNode 获取当前节点的父节点
childNodes 获取当前节点的子节点集合
firstChild 获取当前节点的第一个子节点
lastChild 获取当前节点的最后一个子节点
previousSibling 获取当前节点的前一个兄弟节点
nextSibling 获取当前节点的后一个兄弟节点
attributes 元素的属性列表
一、遍历DOM文档树
在DOM中,遍历HTML文档树,我们可以通过使用parentNode、firstChild、lastChild、previousSibling和nextSibling等属性来实现。
DOM节点操作简介
关于DOM节点常用操作如下:
(1)创建节点;
(2)插入节点;
(3)删除节点;
(4)复制节点;
(5)替换节点;
获取DOM中指定元素
在JavaScript中,可以通过以下2种方式来选中指定元素:
(1)getElementById();
(2)getElementsByName();
一、getElementById()
在JavaScript中,如果想通过id来选中元素,我们可以使用document对象的getElementById()方法。
getElementById()方法类似于CSS中的id选择器。
语法:
document.getElementById("元素id");
二、getElementsByName()
在JavaScript中,如果想通过name来选中元素,我们可以使用document对象的getElementsByName()方法。
语法:
document.getElementsByName("表单元素name值");
说明:
getElementsByName()方法都是用于获取表单元素。
与getElementById()方法不同的是,使用该方法的返回值是一个数组,而不是一个元素。因此,我们想要获取具体的某一个表单元素,就必须通过数组下标来获取。
注意,是getElementsByName()而不是getElementByName()。
getElementByTagName()方法,这个方法类似于CSS中的元素选择器。但是getElementByTagName()方法有个很大缺点,它会把整个页面中相同的元素都选中。
创建节点
一、JavaScript创建节点
在JavaScript中,创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点,然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。
语法:
var e = document.createElement("元素名"); //创建元素节点
var t = document.createTextNode("元素内容"); //创建文本节点
e.appendChild(t); //把元素内容插入元素中去
插入节点
一、JavaScript插入节点
在JavaScript中,插入节点有2种方法:
(1)appendChild();
(2)insertBefore();
1、appendChild()
在JavaScript中,我们可以使用appendChild()方法把新的节点插入到当前节点的“内部”。
语法:
obj.appendChild(new)
说明:
obj表示当前节点,new表示新节点。
举例:
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.appendChild(e);
2、insertBefore
在JavaScript中,我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。
语法:
obj.insertBefore(new,ref)
说明:
obj表示父节点;
new表示新的子节点;
ref指定一个节点,在这个节点前插入新的节点。
举例:
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.insertBefore(e,list.firstChild);
}
删除节点
一、JavaScript删除节点
在JavaScript中,我们可以使用removeChild()方法来删除当前节点下的某个子节点。
语法:
obj.removeChild(oldChild);
说明:
参数obj表示当前节点,而参数oldChild表示需要当前节点内部的某个子节点。
举例:
function del() {
var e = document.getElementById("list");
//判断元素节点e是否有子节点
if (e.hasChildNodes) {//获取元素节点额的最后一个子节点
e.removeChild(e.lastChild); //删除e元素的最后一个子节点
}
}
当我们点击“删除”按钮时,整个列表都被删除了。在使用removeChild()方法删除元素之前我们必须找到2点:
(1)被删除的子节点;
(2)被删除子节点的父节点;
复制节点
一、JavaScript复制节点
在JavaScript中,我们可以使用cloneNode()方法来实现复制节点。
语法:
obj.cloneNode(bool)
说明:
参数obj表示被复制的节点,而参数bool是一个布尔值,取值如下:
(1)1或true:表示复制节点本身以及复制该节点下的所有子节点;
(2)0或false:表示仅仅复制节点本身,不复制该节点下的子节点;
举例:
function add() {
var e = document.getElementById("list");
document.body.appendChild(e.cloneNode(1));
}
替换节点
一、JavaScript替换节点
在JavaScript中,我们可以使用replaceChild()方法来实现替换节点。
语法:
obj.replaceChild(new,old)
说明:
obj,表示被替换节点的父节点;
new,表示替换后的新节点;
old,需要被替换的旧节点。
举例:
function replace() {
//获取两个文本框的值
var tag = document.getElementById("tag").value;
var txt = document.getElementById("txt").value;
//获取p元素
var lvye = document.getElementById("lvye");
//根据两个文本框的值创建新节点
var e = document.createElement(tag);
var t = document.createTextNode(txt);
e.appendChild(t);
document.body.replaceChild(e,lvye);
}
注意:
也就是说,想要实现替换节点,就必须找到3点:
(1)新节点;
(2)被替换的子节点;
(3)被替换子节点的父节点;
innerHTML和innerText
一、innerHTML和innerText简介
我们可以使用apendChild()方法在一个元素节点内部插入一个节点,但是这种方法使用麻烦,并且只能一个个把子节点插进去。
在JavaScript中,我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。
innerHTML属性被多数浏览器所支持,而innerText只能被IE、chrome等支持而不被Firefox支持。
innerHTML属性声明了元素含有的HTML文本,不包括元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。
innerText属性与inerHTML属性的功能类似,只是该属性只能声明元素包含的文本内容。即使指定的是HTML文本,它也会认为是普通文本而原样输出。
<div id="lvye"><strong>绿叶学习网</strong></div>
innerHTML内容是:<input id="txt1" type="text"><br/>
innerText内容是:<input id="txt2" type="text">
<script type="text/javascript">
var e = document.getElementById("lvye");
document.getElementById("txt1").value = e.innerHTML;
document.getElementById("txt2").value = e.innerText;
举例:
<div id="lvye"></div>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.innerHTML="<span style='color:red;font-weight:bold;'>绿叶学习网</span><span style='color:blue;font-weight:bold;'>JavaScript入门教程</span>";
</script>
innerHTML和innerText属性返回值的区别
HTML代码 innerHTML返回值 innerText返回值
<div>绿叶学习网</div> "绿叶学习网" "绿叶学习网"
<div><b>绿叶学习网</b></div> "<b>绿叶学习网</b>" "绿叶学习网"
JavaScript操作CSS样式
一、JavaScript操作CSS简介
在JavaScript中,对于元素的CSS操作,我们使用的是DOM对象中的style对象来操作。
语法:
obj.style.属性名;
说明:
obj指的是DOM对象,也就是通过document.getElementById()等获取而来的DOM元素节点对象。
属性名为CSS属性名。有一点大家要非常清楚,就是这里的属性名使用的“骆驼峰”型的CSS属性名。举个例子,“font-size”应该写成“fontSize”,“border-bottom-width”应该写成“borderBottomWidth”,以此类推。
举例:
function change() {
var e = document.getElementById(“lvye”);
e.style.color = “red”;
e.style.border = “1px solid gray”;
}