深入学习js节点
深入学习js节点
DOM 模型(model)
HTML 文档中的所有节点组成了一个文档树模型，
HTML 文档中的每个元素、属性、文本等都代表着树中
的一个节点。这些节点相互联系，相互影响，构成一个
完整的页面，我们称之为模型。
HTML 文档中的每个成分都是一个节点。
? 整个文档是一个文档节点
? 每个 HTML 标签是一个元素节点
? 包含在 HTML 元素中的文本是文本节点
? 每一个 HTML 属性是一个属性节点
? 注释属于注释节点
节点的属性
节点属性能用来干什么?
1.通过节点的属性，能够获取到每个节点之间的关系，并且可以通过这种关系，
准确快速的获取到相应节点的对象。
获得节点关系的属性
对象.parentNode 获得父节点的引用
对象.childNodes 获得子节点的集合
对象.firstChild 获得第一个子节点的引用
对象.lastChild 获得最后一个子节点的引用
对象.nextSibling 获得下一个兄弟节点的引用
对象.previousSibling 获得上一个兄弟节点的引用
节点的方法
我们之前对页面元素的操作，都是在操作现有的元素，
那么我们如何动态的创建、删除、更改、复制元素，给
元素添加属性、样式呢?就就需要用到我们节点的方法。
节点的方法
一、创建节点
1>创建元素节点
document.createElement("元素标签名");
2>创建属性节点
对象.setAttribute(属性名,属性值)
3>创建文本节点
对象.innerHTML="";
document.createTextNode("文本");
节点的方法
二、追加到页面当中
父对象.appendChild(追加的对象)
在指定元素节点的最后一个子节点之后添加节点
父对象.insertBefore(要插入的对象,之前的对象) 插入
到某个对象之前
节点的方法
? 三、删除节点
? 父对象.removeChild(删除的对象)
? 如果确定要删除节点，最好也清空内存 对象=null;
节点的方法
三、修改(替换)节点
父对象.replaceChild(新节点,被修改的节点);
四、复制节点
待复制的节点.cloneNode() 方法创建指定节点的副本。
该方法有一个参数(true 或 false)。如果设置为true,
所有的子节点也会克隆，否则只会克隆本节点
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
