DOM对象
DOM结构（倒树形结构）
HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)，树状结构叫节点树，结构树反映了各HTML元素之间的层次关系；DOM就通过这种树结构的层次关系，来定位、访问与控制文档中各元素及其内容
DOM按其内容可分为5个部
-
核心DOM：可以同时操作HTML和XML两种文档的公共的属性和方法。；
-
XMLDOM：针对XML操作的接口，也是一些属性和方法
-
HTML DOM：HTML专用接口，也是一些属性和方法；
-
DOM事件模型：定义DOM能够响应的事件.比如：onclick、onload、onchange；
根据 DOM，HTML 文档中的每个成分都是一个节点，HTML文档的节点类型有5个：
-
整个文档是一个文档节点 ，它对应的对象是document对象 9
-
每个 HTML 标签是一个元素节点 1 div=null
-
每一个 HTML 属性是一个属性节点 2 属性=属性值
-
包含在 HTML 元素中的文本是文本节点 （它下面不能再有其它子节点） 3 #test=文本
-
注释属于注释节点 8
节点关系
节点彼此间都存在关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
-
除文档节点之外的每个节点都有父节点(parentNode)。 父节点(parentNode)：当前节点的上一级元素；
-
大部分元素节点都有子节点。 子节点(childNode)：当前节点的下一级元素（1层）；
-
当节点分享同一个父节点时，它们就是同辈（同级节点）。
-
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点
-
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点
只要知道一个节点， 按关系找到其它节点
节点信息。每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）， nodeValue（节点值），nodeType（节点类型)
节点名称 obj.nodeName
-
nodeName 是只读的
-
元素节点的 nodeName 与标签名相同
-
属性节点的 nodeName 是属性的名称
-
文本节点的 nodeName 永远是 #text 元素节点的文本内容
节点值 obj.nodeValue
-
元素节点的 nodeValue 是 null
-
文本节点的 nodeValue 是 文本自身
-
属性节点的 nodeValue 是 属性的值v
节点类型 obj.nodeType
DOM中定义了12种节点类型，有些类型是XML专有的，与HTML相关的节点类型如下图所示。
-
nodeType 是只读的
-
nodeType 属性规定节点的类型
-
元素节点的 nodeType 是 1
-
属性节点的 nodeType 是 2
-
文本节点的 nodeType 是 3
获取节点对象
获取节点
在访问节点树中节点时，起点是document对象。
获取元素节点
document.getElementById("ID")
document.getElementsByTagName("标签名称")
document.getElementsByClassName("类名");
document.getElementsByName("name属性值")
document.querySelector();
document.querySelectorAll();
获取属性
属性节点包括：clsaa，id，style，name等
obj.attributes[0|'id']; //获取对象的所有的属性的集合
obj.getAttribute(“id”); //获取指定属性名的属性值
obj.getAttributeNode(“id”) //从当前元素中通过名称获取属性节点
获取文本节点
var obj=document.getElementById("mydiv");
for(var i=0;i<obj.childNodes.length;i++){
if(obj.childNodes[i].nodeType==3){
document.write(obj.childNodes[i].nodeType+"<br>");
}
}
//注意页面上的回车转行也算一个文本节点取其他节点 获取父、子和同胞节点对象
-
节点对象.parentNode //父节点
-
节点对象.childNodes //获取子节点
-
节点对象.children //获取元素中的子元素对象，不要文本
-
节点对象.firstChild //获取第一个子节点
-
节点对象.firstElementChild //获取第一个子节点，不要文本
-
节点对象.lastChild //获取最后一个子节点
-
节点对象.lastElementChild //获取最后一个子节点，不要文本
-
节点对象.previousSibling //获取前一个兄弟元素节点
-
节点对象.previousElementSibling //获取上一个兄弟元素节点；（只包含元素节点）不包含文本节点；
-
节点对象.nextSibling //获取下一个兄弟元素
-
节点对象.nextElementSibling // 获取下一个兄弟元素节点；（只包含元素节点）不包含文本节点；
-
节点对象.elements // 返回包含表单中所有元素的数组
设置元素对象属性：
-
方法1：元素对象.属性名='属性值'
-
方法2：元素对象.setAttribute('属性名','属性值')
-
方法3：元素对象.dataset.index = '01' （通过dataSet新增自定义属性，一般以data-开头的属性名，为程序员之间默认的格式，认为这是一个自定义属性）
-
元素对象.dataset.defaultColor
-
移除元素对象属性： removeAttribute("name")
-
delete 元素对象.dataset.XXX
元素对象.dataset.XXX
获取及设置元素节点对象内容
-
元素对象.innerHTML（从开始标签-结束标签包括html标签）
-
元素对象.outerHTML（innerHTML的全部和标签本身）
-
元素对象.innerText（只获取元素总的文本内容）
-
表单元素对象.value
创建节点：
| 方法 | 描述 |
| createElement(tagName) | 创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点 例如：node_h1=document.createElement(“h1”) |
| createTextNode(text) | 创建包含文本text的文本节点，返回得到的节点如：node_text=document.createTextNode(“hello”) |
| appendChild(node) | 向当前节点添加子节点，子节点被添加在子节点列表的尾部。例如：node_h1.appendChild(node_text) |
| insertBefore(new,current) | 在current节点前插入new节点。 parentNode.insertBefore(new,current) |
删除节点对象
父节点对象.removeChild("子节点对象")
节点对象.remove() //移除当前元素
替换节点对象
父节点对象.replaceChild("新节点","旧节点")
克隆节点
element.cloneNode(true)
DOM元素的其他获取方式
document文档对象的属性OM
document对象拥有大量的属性，这些属性主要用于描述HTML文档中的标题、URL以及HTML文档中的图片、超链接、表单元素等。
| 属性名 | 说明 |
| anchors | 该属性返回一个数组，代表当前文档中的锚 //anchors.length |
| forms | form表单对象的数组 |
| images | image对象的数组 |
| links | link对象的数组 |
| lastModified | 返回当前文档的最后一次修改时间 |
| title | 设置或返回当前文档的标题 |
状态码-status
1XX消息: 这一类型的状态码，代表请求已被接受，需要继续处理。
2XX成功: 200请求已成功
3XX重定向: 301被请求的资源已永久移动到新位置。
4XX请求错误: 404 Not Found。 请求失败，请求所希望得到的资源未被在服务器上发现
5XX 服务器错误
端口号
客户端：80http / 443https
数据库：3306
ftp：21
url构成：
https://www.baidu.com:80/index/index.html?page=1&num=10
-
http / https 协议
-
:80 端口号，80默认端口号
-
index：文件夹的名称
-
index.html：被访问的文件的名称
-
?后面：传递的参数，get传參;多个参数用&连接
原文地址：https://blog.csdn.net/aaaaaaaallllll/article/details/142528816
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！