DOM-概述
概念： Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment:注释对象
Node：节点对象，其他5个的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
DOM_Document对象_创建DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document对象</title>
</head>
<body>
<!--id为div1的盒子-->
<div id="div1">div1</div>
<!--id为div2的盒子-->
<div id="div2">div2</div>
<!--id为div3的盒子-->
<div id="div3">div3</div>
<!--id为div4的盒子-->
<div class="cls1">div4</div>
<!--id为div5的盒子-->
<div class="cls1">div5</div>
<!--框子-->
<input type="text" name="username">
<script>
/*
Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 属性
*/
//2.根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
//页面弹窗
alert(divs.length);
//3.根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
//页面弹窗
alert(div_cls.length);
//4.根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
//页面弹窗
alert(ele_username.length);
//createElement 通过指定名称创建一个元素
var table = document.createElement("table");
// 页面弹窗
alert(table);
</script>
</body>
</html>
DOM_Node对象
Node：节点对象，其他5个的父对象
特点：所有dom对象都可以被认为是一个节点
方法：
CRUD dom树：
appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild() ：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。
属性：
parentNode 返回节点的父节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象</title>
<style>
/*<!-- 所有的div盒子-->*/
div {
/*边框1，实线，红色*/
border: 1px solid red;
}
/*id为div1的盒子*/
#div1 {
/*宽200*/
width: 200px;
/*高200*/
height: 200px;
}
/*id为div2的盒子*/
#div2 {
/*宽100*/
width: 100px;
/*高100*/
height: 100px;
}
/*id为div3的盒子*/
#div3 {
/*宽100*/
width: 100px;
/*高100*/
height: 100px;
}
</style>
</head>
<body>
<!--设置盒子名称为div1-->
<div id = "div1">
<!-- 设置盒子名称为div2-->
<div id = "div2">div2</div>
<!-- di为div1盒子的内容-->
div1
</div>
<!--a标签 超链接 名字为del-->
<!--<a href = "javascript:void(0);" id = "del">删除子节点</a>-->
<!--超链接，名字为add-->
<a href = "javascript:void(0);" id = "add">添加子节点</a>
<!--删除按钮-->
<input type="button" id="del" value="删除子节点">
<script>
//1.获取超链接
var element_a = document.getElementById("del");
//2.绑定单击事件
element_a.onclick = function(){
//获取div1盒子
var div1 = document.getElementById("div1");
//获取div2盒子
var div2 = document.getElementById("div2");
//删除盒子
div1.removeChild(div2);
}
//1.获取超链接
var element_add = document.getElementById("add");
//2.绑定单击事件
element_add.onclick = function() {
//获取div1的盒子
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
//添加盒子
div1.appendChild(div3);
}
/*
超链接功能：
1.可以被点击：样式
2.点击后跳转到href指定的url
需求：保留1功能，去掉2功能
实现：href="javascript:void(0);"
*/
//获取div2的盒子
var div2 = document.getElementById("div2");
//返回指定节点的父节点
var div1 = div2.parentNode;
//页面弹窗
alert(div1);
</script>
</body>
</html>
标签：Node,DOM,对象,var,document,节点,div1 From： https://www.cnblogs.com/yuzong/p/16828954.html