javascript-DOM基础

理解1.包含不同层次节点的dom,使用不同的节点类型
dom(文档对象模型)是针对html和xml文档的一个api,dom描绘了一个层次化的节点树，说白了就是根据这个描绘的树形结构，方便开发人员添加、删除和修改页面，节点分为几种不同类型，节点之间的关系构成了层次，dom就是描述这个层次的一种数据结构

第一部分：节点属性
Node是dom1级定义的一个接口，该接口由dom中所有的节点实现，这个接口在javascript中是作为Node类实现的，及Node作为基类，（ie的dom对象是以com对象实现的）
1）每个节点都有的属性
@1）nodeType(value值为1-12，注意到的为以下几个)
1.元素节点、2.属性节点、3文本节点、8.注释节点、9.文档节点（Document）、11文档碎片
@2）childNodes
每个节点都有该属性，但不是每个节点都有自己的孩子（元素下面第一层）节点（例如文本节点），该属性保存着一个nodeList对象，该对象是一种类数组对象，也就是说它并不是Array的实例，没有数组操作的方法，但是却有length属性也可以通过下标访问

image.png

@3）parentNode
每个节点都有parentNode属性，，该属性指向文档树中的父节点,包含在childNodes中的节点的父节点相同
@4）兄弟节点nextSibling,previousSibling

第二部分：操作节点（创建，插入，删除节点）
//创建元素节点
var element = document.createElement("div");
//创建文本节点
var textNode = document.createTextNode("Hello world!");
//由图可以看出，如果想要插入的节点是文档的一部分，结果是将该节点从原来的位置转移到新位置（插入，移除都是由父节点调用）
parent.appendChild(element)
parent.insertBefore(newElement,''谁之前的那个元素')

image.png

//移除节点
parent.removeChild(node)

第三部分：节点类型
@1）Document类型（nodeType = 9）,在浏览器中，document是HTMLDocument的一个实例，每个载入浏览器的 HTML 文档都会成为Document对象，javascript通过Document类型表示文档，并且document是window对象的一个属性
@1.1）方法
查找元素document.getEementBy...
反应网页标题栏信息 document.title="123"
反应网页请求（取得完整url，取得域名，获得来源页面的url）
document.URL document.domain document.referrer
@2）Element类型用于表现html和xml元素，属性有id,className,titile(lang和dir很少使用)
@2.1）方法
<a href-"#" id="a1">hello</a>
var a1 = document.getElementById('a1')
a1.getAttribute(''id'') 等价于 a1.id
a1.setAttribute("id","a2") 等价于 a1.id="a2"

@3)DocumentFragment在所有节点中只有该节点类型在文档中没有标记DOM规定文档片段是一种轻量级文档，可以包含节点，但是不会像完整的文档那样占用资源，比如我们需要向网页中插入1000000个li元素，执行的时候，页面会会出现停白的时间，这时我们可以把要插入的li放入文档片段中，最后进行插入如代码

var fragment = document.createFragment();
var ul = document.getElementById("ul1");
for(var i = 0; i < 100000; i++){
    li = document.createElement('li');
   fragement.appendChild(li);
}
//文档中并不会出现fragment元素标签
ul.appendChild(fragment)

练习：操作表格https://www.jianshu.com/p/f237c6ca3bdd
js学习（ECMAScript，DOM，BOM）:https://www.jianshu.com/p/b7136540b379

javascript-DOM基础

推荐阅读更多精彩内容