Javascript学习之DOM

内容

对于DOM的一些学习体验与心得。

什么DOM

DOM(Document Object Model)中文名叫做文本对象模型，是w3c为了解决浏览器不兼容问题提出的应用程序接口，是一种通过DOM提供的构造函数把文本标签转化为对象的模型。DOM有四大类：Element、Text、Comment、Document。文本标签是通过Element构造函数实例化(html标签除外)，文本标签html是通过Document构造函数实例化，html注释通过Comment构造函数实例化，html文本通过Text构造函数实例化。这四个类的祖先是Node类，而Node类的祖先是Object类。

DOM树

在学习DOM树之前，学习者需要对数据结构有基本的了解。树是数据结构中逻辑结构的一种，它的物理存储结构是基于链表实现的。在客户需要访问页面时，浏览器会向服务器端发送资源请求，服务器在接到请求后会将相应资源返回给浏览器(其中包含html)。浏览器将返回的html标签在浏览器内存中调用DOM类进行实例化。其中父对象依项指向子节点，从而构成DOM树。借助于DOM提供的API，开发人员可以轻松自如地删除、添加、、替换或修改DOM树上的任一节点。

DOM之Node类

Node类常见的方法有：
(1)使节点格式化:Node.normalize()
(2)复制节点: Node.g.cloneNode(boolean);
(3)插入节点:Node.appendChild(node);
Node.insertBefore(newnode,node);
(4)删除节点: Node.removeChild(node);
(5)替换节点:Node.replaceChild(newnode,oldnode);
(6)判断是否为默认命名空间Node.isDefaultNamespace()
(7)是否有子节点:Node.hasChildNode(); //判断元素节点是否有子节点
(8)判断节点是否相等: Node.EqualNode(node) Node.isSameNode

常见的Node属性如下：
Node.childNodes
Node.firstChild
Node.lastChild
Node.nextSibling
Node.previousSibling
Node.parentNode
Node.nodeType //元素节点返回1，属性节点返回2
Node.nodeName
Node.nodeValue
Node.ownerDocument

DOM之Document类

Document类常见的方法有:
document.getElementById(id);　　　　　　　　 　　//返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);　　　　　　//返回带有指定名称的节点集合　　 注意拼写:Elements
document.getElementsByTagName(tagname); 　　//返回带有指定标签名的对象集合　 注意拼写：Elements
document.getElementsByClassName(classname); //返回带有指定class名称的对象集合 注意拼写：Elements
document.createElement(eName);　　//创建一个节点
document.createAttribute(attrName); //对某个节点创建属性
document.createTextNode(text);　　　//创建文本节点
document.adoptNode(node) //将另一个文本中的节点带入
document.open() document.close() //打开关闭文本流
createComment()
createDocumentFragment()
write()
writeln()
importNode()
Document类常见的属性有:
document.title //设置文档标题等价于HTML的

##DOM之Element类
Element类常用属性有:
.children 子元素列表
.childElementCount 子元素数量
.firstElementChild 第一个子元素
.lastElementChild 最后一个子元素
.classList 类名列表（对象）
.className 类名（字符串）
.id 元素id
.attributes 所有显性属性
.innerHTML 元素内部的HTML标记
.outerHTML 包含元素在内的HTML标记
.clientWidth 内容区 + padding的宽度
.clientHeight 内容区 + padding的高度
.scrollHeight 元素中可以滚动的高度
.scrollWidth 元素中可以滚动的宽度
.scrollTop 元素中的内容已经向上滚出去多少
.scrollLeft 元素中的内容已经向左滚出去多少
Element类常用方法有:
.getAttribute(属性名) 获取属性的值
.setAttribute(属性名，属性值) 获取属性的值
.getAttributeNames() 列出所有属性
.hasAttribute(属性名) 是否拥有属性
.hasAttributes() 是否拥有至少一条属性
.removeAttribute(属性名) 删除一条属性
.addEventListener(事件名称，回调函数) 监听一个事件
.getElementById(id) 在当前元素下通过id获取元素
.getElementsByClassName(class) 在当前元素下通过class获取元素
.getElementsByTagName(标签名) 在当前元素下通过元素名称获取元素
.querySelector(选择器) 在当前元素下通过CSS选择器来获取一个元素
.querySelectorAll(选择器) 在当前元素下通过CSS选择器来获取多个元素

Web浏览器对DOM的支持

引用博客

简书:https://www.jianshu.com/p/8779aaaef43d
博客园:https://www.cnblogs.com/deardashi/p/6297881.html