DOM
文档对象模型,浏览器提供了一系列api,通过此api进行dom操作
DOM的体系结构
object > node > Element/Document/Comment/Text
通过下方代码进行举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>node</title>
<style type="text/css">
*{
margin: 0px;
}
#app{
border: 1px solid pink;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app" class="container app">
你好
<form name="biaodan"></form>
<div class="head" ></div>
<div class="content">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<!-- 底部 -->
<div class="footer"></div>
</div>
<script type="text/javascript"></script>
</body>
</html>
node
节点元素,在html中所有的标签都可以被称为节点,例如:< div >、< !-- -->等
1.实例化
浏览器在加载HTML的时候已经完成了节点的实例化,我们只需要通过document.xxx方法获取即可
2.属性
1)节点特性的属性
node.prototype.nodeType
Element元素节点的返回值为1
Text文本节点的返回值为3
Comment注释节点的返回值为8
Document文档节点的返回值为9
node.prototype.nodeValue
Element元素节点的返回值为null
Document文档节点的返回值为null
Text文本节点的返回值为文本内容
Comment注释节点的返回值为注释中的内容
node.prototype.nodeName
Element元素节点的返回值为元素大写的标签名
Doument文档节点的返回值为#document
Comment注释节点的返回值为#comment
Text文本节点的返回值为#text
2)层次关系的属性
node.prototype.childNodes
返回所有的子节点
node.prototype.firstChild
返回第一个子节点
node.prototype.lastChild
返回最后一个子节点
node.prototype.nextSibling
返回下一个兄弟节点
node.prototype.previousSibling
返回上一个兄弟节点
node.prototype.parentNode
返回父节点
node.prototype.parentElement
返回父元素
node.prototype.contentText
返回一个节点及其后代的文本内容
3.方法
node.prototype.append()
添加子节点
node.prototype.insertBefore(newNode,refNode)
在refNode之前添加newNode
node.prototype.replaceChild(newNode,refNode)
将refNode替换为newNode
node.prototype.removeChild()
移除子节点
node.prototype.cloneNode(deep)
克隆
若deep的值为true,则该节点的所有后代节点也都会被克隆,若deep的值为false,则只克隆该节点。参数默认为false
node.prototype.hasAttribute(属性名)
判断是否有属性名为xxx的属性,返回值为Boolean