一、元素类型分类
| 常量名 |
常量值 |
节点类型 |
描述 |
| Node.ELEMENT_NODE |
1 |
Element |
代表元素 |
| Node.ATTRIBUTE_NODE |
2 |
Attr |
代表属性 |
| Node.TEXT_NODE |
3 |
Text |
代表元素或者属性中的文本内容 |
| Node.CDATA_SECTION_NODE |
4 |
CDATASection |
代表文档中的CDATA部（不会由解析器解析的文本） |
| Node.ENTITY_PEFERENCE_NODE |
5 |
EntityReference |
代实体引用 |
| Node.ENTITY_NODE |
6 |
Entity |
代表实体 |
| Node.PROCESSING_INSTRUCTION_NODE |
7 |
Processinginstruction |
代表处理指令 |
| Node.COMMENT_NODE |
8 |
Comment |
代表注释 |
| Node.DOCUMENT_NODE |
9 |
Document |
代表整个文档（DOM树的根节点） |
| Node.DOCUMENT_TYPE_NODE |
10 |
DocumentType |
向为文档定义的实体提供接口 |
| Node.DOCUMENT_FRAGMENT_NODE |
11 |
DocumentFragment |
代表轻量级的Document对象（文档的某个部分） |
| Node.NOTATION_NODE |
12 |
Notation |
代表DTD中的声明符号 |
<body>
<div id="box">
<button class="btn">按钮</button>
<span id="span">
<a href="#">一个链接</a>
</span>
<p class="lk">我是段落标签</p>
<div>哈哈哈</div>
</div>
<script>
window.onload = function (ev) {
//1.获取标签
var box = document.getElementById("box");
//2.获取标签内部的所有节点
var allNodeLists = box.childNodes;
//3.过滤元素节点
var newListArr = [];
allNodeLists.forEach(function (value,key,parent) {
// console.log(value);
console.log(value.nodeType);
if(value.nodeType === 1){//这里的意思就是把元素标签拿出来
newListArr.push(value);
}
});
console.log(newListArr);
}
</script>
</body>
二、节点CD
window.onload = function(){
//当页面加载完成执行
//当也买你完全加载所有的内容（包括图像、脚本文件、CSS文件等）执行
window.onunload = function(){
//当用户退出页面时候执行
}
三、DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D29_1_TagCD</title>
</head>
<body>
<div class = "box">
<p id="word">xiaoming</p>
<button id="btn">点我</button>
</div>
<script>
window.onload = function (ev) {
//CRUD操作
var box = document.getElementsByClassName("box")[0];
//1.创建节点
var img = document.createElement("img")//创建了一个img标签
img.src = "img/img_01.png";
box.appendChild(img);
var btn = document.getElementsByTagName("button")[0];
box.insertBefore(img,btn);
}
</script>
</body>
</html>
三、源码：
- D28_1_GetAPI.html
- D29_1_TagCD.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D28_1_GetAPI.html
https://github.com/ruigege66/JavaScript/blob/master/D29_1_TagCD.html- 博客园：
https://www.cnblogs.com/ruigege0000/
- CSDN：
https://blog.csdn.net/weixin_44630050?t=1
- 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
