一、 DOM基础
1.1 什么是DOM
DOM(Document Objecevt Model) :文档对象模型
1) DOM 是W3C（万维网联盟）的标准。它是一个规范，而不是某个特定编程语言的实现。
所以不仅是js有DOM，任何一种语言都可以实现DOM的规范。
2) DOM 定义了访问和操作HTML文档的标准接口。
其作用是用对象描述文档。通过DOM可以改变网页的内容、结构和样式。
3) DOM 将文档描述成一个由节点层级构成的树结构。
1.2 DOM树
1) DOM中，所有事物都是节点。
DOM将HTML文档的各个部分都描述为一个对象，我们称之为节点(Node)。节点是构成文档树的最基本的组成部分。
2) DOM将HTML文档描述为一个文档树。整个文档树使用了document对象来描述。
1.3 具体操作可以使用API文档。
1）方式一: 使用文档DHTML.chm文档
切记：此文档很重要
2）方式二 : 使用在线文档
https://www.w3school.com.cn/jsref/dom_obj_all.asp
二、DOM节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
2.1 节点对象
1）节点对象分类
+++ Node节点对象分类:
文档节点: 1、文档本身是文档节点 (Document类型对象)
2、document对象是Document构造函数的实例。
浏览器提供了document对象,浏览器页面中可以直接使用
元素节点: HTML标签(Element类型的对象)
属性节点: HTML标签的属性(Attr类型的对象)
文本节点: HTML标签内的文本。（空白文本也是文本节点）(Text类型的对象)
注释节点:注释是注释节点
+++ Node节点对象之间的关系:
1、Node对象就是节点对象，它是DOM中最基础的对象。在DOM中所有事物都被看作为节点对象。
2、Node对象分为Document、Text、Attr、Element等类型的对象。
这些构造函数都直接或间接继承了Node构造函数。（通过原型链实现）
3、document对象是浏览器为我们提供了Document构造函数的实例，该对象我们可以直接使用。
>>>>>> Node节点对象的分类
Node节点对象分为Document、Attr、Element、Text等类型的对象。
这些构造函数都直接或间接继承了Node构造函数。
//文档节点。docuemnt对象是浏览器提供的Document的实例，可直接使用
console.log(document);
console.log(document instanceof Document); //true
console.log(document instanceof Node); //true
//元素节点。
var s=document.getElementById("cc");
console.log(s instanceof Element); //true
console.log(s instanceof Node); //true
//属性节点
var attr=s.getAttribute("id")
console.log(attr instanceof Attr); //true
console.log(attr instanceof Node); //true
>>>>>> Document、Attr、Element、Text都直接或间接继承了Node构造函数（通过原型链实现继承关系）
console.log(Document.prototype.__proto__);
console.log(Element.prototype.__proto__);
console.log(Text.prototype.__proto__.__proto__);
console.log(Attr.prototype.__proto__);
2）Node基本属性
每个节点对象都拥有这些属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
3）节点注意事项
1、文本或者是空白文本也是节点。
2、子节点和子元素节点是完全不同。
子节点指的是所有类型的节点，包含空白文本，即文本节点。
子元素节点指的就是元素节点。
>>>>>> 空白文本也是节点。即文本节点
获取div的子节点，由于空白文本也是文本节点，所以，第一个子节点就是空白文本。
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
//根据css选择器获取元素对象。如果有多个，也只返回一个
var elem=document.querySelector(".outer");
//获取元素的第一个子节点
var node=elem.firstChild
console.log(node) // #text
</script>
获取div的子节点，由于空白文本也是文本节点，但是div内部第一个元素没有空白，所以，第一个子节点就是inner的div。
<body>
<div class="outer"><div class="inner"></div>
</div>
</body>
<script>
//根据css选择器获取元素对象。如果有多个，也只返回一个
var elem=document.querySelector(".outer");
//获取元素的第一个子节点
var node=elem.firstChild
console.log(node) //
</script>
>>>>>> 子节点和子元素节点是不同的概念
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
//根据css选择器获取元素对象。如果有多个，也只返回一个
var elem=document.querySelector(".outer");
//获取元素的第一个子节点
var node=elem.firstChild
console.log(node) //
//获取元素的第一个子元素节点
var node=elem.firstElementChild
console.log(node) //
</script>
2.2 Document节点对象
1、document对象是浏览器为我们提供的Document构造函数的实例对象。
它代表文档节点对象。我们可以直接使用。
2、这个对象是window的属性,可以在页面中直接使用，文档节点对象代表整个HTML。
1） document对象常用属性
document.body 获取body标签对象
document.documentElement 获取html标签对象
document.cookie 设置或返回与当前文档有关的所有 cookie。
document.title 返回当前文档的标题。
document.URL 返回当前文档的 URL。
案例
//获取body标签对象
var b1=document.body;
console.log(b1)
//获取cookie
var b2=document.cookie
console.log(b2)
//获取标题
var b3=document.title
console.log(b3)
//获取URL
var b4=document.URL
console.log(b4)
2） document对象常用方法
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
2.3 Element节点对象
1、Element节点对象，即元素节点对象。 浏览器将HTML的元素封装为元素节点对象,即Element对象。
2、Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
1） Element对象常用属性
+++ 设置或获取元素属性的值
elem.id 设置或返回元素的 id。
elem.className 设置或返回元素的 class 属性。
elem.style 设置或返回元素的 style 属性。
elem.innerHTML 设置或返回元素的内容。
elem.title 设置或返回元素的 title 属性。
elem.accessKey 设置或返回元素的快捷键。
elem.tabIndex 设置或返回元素的 tab 键控制次序。
elem.textContent 设置或返回节点及其后代的文本内容。
+++ 获取元素的属性
elem.clientHeight 返回元素的可见高度。
elem.clientWidth 返回元素的可见宽度。
elem.tagName 返回元素的标签名。
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。
+++ 获取其他元素
elem.firstChild 获取元素的第一个子节点
elem.lastChild 获取元素的最后一个子节点
elem.childNodes 获取元素的所有子元素
elem.attributes 返回元素属性的 NamedNodeMap。
element.previousSibling 返回位于相同节点树层级的前一个元素。
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.parentNode 返回元素的父节点。
>>>>>> 设置或获取元素的属性
var ss=document.getElementById("cc")
//设置或获取ID属性
ss.id="newId"
console.log(ss.id);
//设置或获取class属性
ss.className="newName"
console.log(ss.className);
//设置或获取style属性
ss.style="width:100px;height:100px;background-color:red;";
console.log(ss.style);
//设置或获取标签内
ss.innerHTML="xxx";
console.log(ss.innerHTML);
>>>>>> 获取元素的属性
var ss=document.getElementById("cc")
ss.style="width:100px;height:100px;";
console.log(ss.clientHeight)
console.log(ss.clientWidth)
console.log(ss.tagName)
>>>>>> 获取元素的其他子元素
var elem=document.getElementById("cc")
//返回元素的第一个子节点
var b1=elem.firstChild;
console.log(b1)
//返回元素的最后一个子节点
var b1=elem.lastChild;
console.log(b1)
//返回元素属性的 NamedNodeMap。
var b1=elem.attributes;
console.log(b1);
//返回元素子节点的 NodeList。
var b1=elem.childNodes;
console.log(b1)
2） Element对象常用方法
+++ 获取
elem.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
elem.toString() 把元素转换为字符串。
+++ 操作元素的属性
elem.setAttribute("cc","12") 把指定属性设置或更改为指定值。
elem.removeAttribute("cc") 从元素中移除指定属性。
elem.getAttribute("cc") 返回元素节点的指定属性值。
elem.setAttributeNode(attrNode) 设置或更改指定属性节点。
elem.removeAttributeNode(attrNode) 移除指定的属性节点，并返回被移除的节点。
elem.getAttributeNode() 返回指定的属性节点。
+++ 操作子元素
elem.appendChild() 向元素添加新的子节点，作为最后一个子节点。
elem.insertBefore() 在指定的已有的子节点之前插入新节点。
elem.removeChild() 从元素中移除子节点。
elem.replaceChild() 替换元素中的子节点。
+++ 判断
elem.hasClass("xxx") 判断一个元素中是否含有某个class
elem.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。
elem.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。
elem.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。
>>>>>> 操作元素属性
var elem=document.getElementById("cc")
//给元素设置属性
elem.setAttribute("cc","ttttt");
console.log(elem); //<div id="cc" class="ccc" cc="ttttt"></div>
//获取元素属性
var str=elem.getAttribute("cc");
console.log(str); //tttttt
//删除元素属性
elem.removeAttribute("cc");
console.log(elem) //<div id="cc" class="ccc" ></div>
>>>>>> 创建Attr属性节点对象，操作元素属性
var elem=document.getElementById("cc")
//创建attr对象
var attr=document.createAttribute("xx")
attr.value="123";
elem.setAttributeNode(attr)
console.log(elem)
var attr2=elem.getAttributeNode("xx");
console.log(attr2)
>>>>>> 操作子元素
var elem=document.getElementById("cc")
//在元素中插入div子元素
var newElem=document.createElement("div");
newElem.innerText="123"
elem.appendChild(newElem);
console.log(elem)
2.4 Attr节点对象、Text节点对象
Attr节点对象:
Attr节点对象，即属性节点对象。
浏览器将HTML的元素的属性封装为属性节点对象,即Attr对象。
var attr=document.createAttribute("xxx"); 创建属性节点对象
attr.name 获取属性节点名称
attr.value 获取或设置属性节点值
Text节点对象:
Text节点对象,即文本节点对象。
>>>>>> Attr节点对象
//创建attr属性对象
var attr=document.createAttribute("xxx");
//设置attr属性对象的值
attr.value="21212";
console.log(attr.name); //xxx
console.log(attr.value); //21212
>>>>>> Text节点对象
var elem=document.getElementById("cc")
//创建text文本节点
var textNode=document.createTextNode("xxxxxxxxxxxx");
console.log(textNode);
//在元素中插入文本节点
elem.append(textNode);
2.。33 事件
元素节点的属性：
elem.innerHTML
可以获得元素内部的HTML代码。
elem.innerText
可以获得元素内部的文本内容。
它和innerHTML类似，不同的是它会把html代码去除。
elem.id
elem.name
elem.value
elem.className 读取元素的class属性。
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
