Document Object Model
Posted 结合是仙女
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Document Object Model相关的知识，希望对你有一定的参考价值。
什么是DOM W3C制定的书写html分析器的标准接口规范
全称 Document Object Model 文档对象模型
DOM为HTML文档提供的一个API（接口） 可以操作HTML文档
<!DOCTYPE html> 不是标签
作用 声明 告诉浏览器采用哪个版本的html去解析代码
发展历程 包含0到3级 0，3级并不是W3C的标准
当浏览器加载HTML页面时，就会创建一个DOM树结构
四个节点
文档 元素 文本 属性
9 1 3 2
判断节点类型
https://runjaelyn.github.jo
DOM查询
document.getElementById( id属性值 )
document.getElementsByClassName( class属性值 )
document.getElementsByTagName( 标签名 )
document.getElementsByName( name属性值 )
let box = document.getElementsById("box");
console.log(box);
let wrap = document.getElenmentsByClassName("warp")[0];
console.log(wrap);
let divs = document.getElementsByTagName("div")[1];
console.log(divs);
let username = document.getElementsByClassName("username");
console.log(username);
querySelector()
返回第?个选择器匹配的 HTML 页面元素。
querySelectorAll()
返回全部选择器匹配的 HTML 页面元素。
Document 对象、Element 对象和 Node 对象这三个对象
（空格和换行都是文本节点）
Document 对象
创建文本节点
let divEle = document.createElement("div");
document.body.appendChild( divEle );
var text = document.createTextNode("hello world");
divEle.appendChild( text );
创建属性节点
let node = document.getElementById("div"); // 获取 <div> 标签
let attr = document.createAttribute("my_attr"); // 创建属性节点
attr.nodeValue = "属性值"; // 设置属性节点的 nodeValue
node.setAttributeNode( attr );
缓存 DOM 查询
当把 DOM 查询的结果保存在?个变量后，实际上是把获取的指定标签在 DOM 节点树中的位置保存在变量中。这个元素
节点（标签）的属性和方法可以通过这个变量来使用。
通过 getElementsByName() 、 getElementsByTagName() 和 getElementsByClassName() 方法获取的
NodeList 就是动态的 NodeList。
通过 querySelectorAll() 方法获取的 NodeList 就是动态的 NodeList。
parentNode是一种方法
以上是关于Document Object Model的主要内容，如果未能解决你的问题，请参考以下文章
使用 document.getElementById 时返回 [object HTMLDivElement]
文件另存为——Signatures object.SaveAs FileName, FileType [, SecurityParams] Object Document, MenuGrou