JS--dom对象：document object model文档对象模型

Posted 2020-11-06 小屈工作室

dom对象：document object model文档对象模型
文档：超文本标记文档 html xml
对象：提供了属性和方法
模型：使用属性和方法操作超文本标记性文档
可以使用js里面的DOM提供的对象，使用这些对象的属性和方法，对标记性文档进行操作
想要对标记性文档进行操作，首先需要对标记性文档里面的所有内容封装成对象
对HTML 标签 属性 文本内容都封装为对象
要想对标记性文档进行操作，解析标记性文档
--使用DOM解析HTML过程
根据HTML的层级结构，在内存中分配一个树形结构，需要把HTML中的每部分封装成对象
document对象，整个文档
write():向页面输出变量(值/html代码)
getElementById("标签里边的id的值");通过id得到标签(元素)
获得属性值，标签对象.属性名称;
设置属性值，标签对象=值;
getElementsByName("标签里边的name的值");返回值是数组
getElementsByTagName("标签名称")返回值是数组
element对象：元素（标签）对象
getAttribute("属性名称"):获得属性里面的值 input1.getAttribute("value");
setAttribute("属性名称","属性值")设置属性里面的值
removeAttribute("name");删除属性得值，但是不能删除value里面的值

属性对象
getAttributeNode("属性名称");

文本对象
--Node节点对象，这个对象使这些对象的父对象
如果在对象里面找不到想要的方法，这个时候到Node对象里面去找
nodeName string 节点的名字，根据节点的类型而定义
nodeValue string 节点的值，根据节点的类型而定义
nodeType number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
//获取文本节点
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点

-childNodes NodeList 所有子节点的列表,但是浏览器兼容性很差
-parentNode Node 返回一个给定节点的父节点
previousSibling Node 指向前一个兄弟节点，如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling Node 指向后一个兄弟节点，如果这个节点就是最后一个兄弟节点那么该值为null

hasChildNodes Boolean 当childNodes包含一个或多个节点时，返回true
attributes NameNodeMap 包含了代表一个元素的特性的Attr对象，仅用于Element节点
appendChild(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从ChildNodes中删除node
replaceChild(newnode,oldnode) Node 将ChildNodes中的oldnodes替换成newnodes
insertBefore(newnode,refnode) Node 在childNodes中 的refnode之前插入newnode

Node对象属性
nodeName
nodeType
nodeValue

<script type="text/javascript">
//获取标签对象
var span1 = document.getElementById("spanid");
alert(span1.nodeType);//1
alert(span1.nodeName);//SPAN
alert(span1.nodeValue);//null

//属性
var id1 = span1.getAttributeNode("id");
alert(id1.nodeType);//2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid

//文本
var text1 = span1.firstChild;
alert(text1.nodeType);//3
alert(text1.nodeName);//#text
alert(text1.nodeValue);//文本内容
</script>
<span id="spanid">哈哈呵呵</span>