Js_Dom(3)__Dom基础<节点常用属性方法和table>

1.文档节点(document)

属性:

all文档中所有HTML元素集合//例document.all[2]

anchors文档中所有锚点对象集合

forms文档中所有form对象集合

images文档中所有img对象集合

body,cookie,domain,lastModified,referrer,title,URL

方法:

getElementById()返回对拥有指定 id 的第一个对象的引用。

 

getElementsByName()返回带有指定name的对象集合。

 

getElementsByTagName()返回带有指定标签名的对象集合。

2.元素节点

元素节点对象可以拥有类型为元素节点、文本节点、注释节点的子节点

element.appendChild()    向元素添加新的子节点，作为最后一个子节点。

element.attributes 返回元素属性的 NamedNodeMap(所有的属性)。

element.childNodes返回元素子节点的NodeList。

element.className         设置或返回元素的class 属性。

document.createElement()     创建元素节点

element.cloneNode()       克隆元素。

element.dir      设置或返回元素的文本方向//值有左右:rtl ltl

element.firstChild   返回元素的首个子节点。

element.getAttribute()   返回元素节点的指定属性值。

element.getAttributeNode()   返回指定的属性节点。

element.getElementsByTagName()        返回拥有指定标签名的所有子元素的集合。

element.hasAttribute()   如果元素拥有指定属性，则返回true，否则返回 false。

element.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。

element.hasChildNodes()        如果元素拥有子节点，则返回true，否则 false。

element.id        设置或返回元素的 id。

element.innerHTML         设置或返回元素的内容。

element.textContent       设置或返回节点及其后代的文本内容。

element.insertBefore()   在指定的已有的子节点之前插入新节点。

element.isContentEditable     是否可以设置或返回元素的内容(是否可编辑)。

element.isEqualNode()    检查两个元素是否相等。

element.isSameNode()    检查两个元素是否是相同的节点。

element.lastChild    返回元素的最后一个子元素。

element.nextSibling         返回位于相同节点树层级的下一个节点(弟弟)

element.nodeName         返回元素的名称。

element.nodeType  返回元素的节点类型。//返回12个数字中一个 作业:查看博客每一种

element.nodeValue 设置或返回节点的值。//注意点:元素的文本信息是元素的子节点,先得到文本节点,在调这个属性才能得到想要的文本.

element.ownerDocument       返回元素的根元素（文档对象）。

element.parentNode       返回元素的父节点。

element.previousSibling  返回位于相同节点树层级的前一个元素。

element.removeAttribute()     从元素中移除指定属性。

element.removeAttributeNode()    移除指定的属性节点，并返回被移除的节点。

element.removeChild()   从元素中移除子节点。

element.replaceChild()    替换元素中的子节点。

element.setAttribute()    把指定属性设置或更改为指定值。

element.setAttributeNode()   设置或更改指定属性节点。        

element.setUserData()   把对象关联到元素上的键。

element.style  设置或返回元素的style 属性。

element.tabIndex    设置或返回元素的 tab 键控制次序。

element.tagName   返回元素的标签名。

element.title   设置或返回元素的title 属性。

element.toString()   把元素转换为字符串。

nodelist.item(index) 返回 NodeList 中位于指定下标的节点。

nodelist.length         返回 NodeList 中的节点数。

关于盒子的

element.clientHeight       返回元素的可见高度。//跟style返回的宽高的数据类型对比

element.clientWidth        返回元素的可见宽度。

element.offsetHeight      返回元素的高度(可见+边+滚动条)。

element.offsetWidth       返回元素的宽度。

element.offsetLeft  返回元素的水平偏移位置。

element.offsetTop   返回元素的垂直偏移位置。

element.scrollHeight       返回元素的整体高度。

element.scrollWidth        返回元素的整体宽度。

element.scrollLeft   返回元素左边缘与视图之间的距离。

element.scrollTop    返回元素上边缘与视图之间的距离。

属性节点:

document.getElementById("p1").getAttributeNode("style")

 

attr.isId    如果属性是 id 类型，则返回 true，否则返回 false。

attr.name         返回属性的名称。

attr.value 设置或返回属性的值。

nodemap.getNamedItem()     从 NamedNodeMap 返回指定的属性节点。

nodemap.item(index)      返回NamedNodeMap 中位于指定下标的节点。

nodemap.length      返回NamedNodeMap 中的节点数。

nodemap.removeNamedItem()       移除指定的属性节点。

nodemap.setNamedItem()      设置指定的属性节点（参数填createAttribute创建的属性或者获取的属性）。

table表格的操作

1.表格对象自带的

属性:

rows         返回包含表格中所有行的一个数组。

cells 返回包含表格中所有单元格的一个数组。//先得到row再得到cells

方法:

insertRow(index) 在表格中插入一个新行,并返回这个行。(-1表示在末尾插入)

insertCell(index) 在行中插入一个单元格,并返回这个单元格(-1表示在末尾插入)

cell.innerHTML 在单元格中插入内容

<table id="mytable1"style="width:600px" border="1px">

var table1= document.getElementById("mytable1")

            for (vari=0;i<100 ; i++){

                varrow = table1.insertRow(-1);

                for(var j=0;j<100 ; j++){

                   var cell = row.insertCell(-1);

                   cell.innerHTML=(new Date()).getTime();

                }

            }

时间:1480587971300-1480587971165=135(ms)

2.DOM操作

<table id="mytable1"style="width:600px" border="1px">

for (var i=0;i<100 ; i++){

                vartr = document.createElement("tr");

                for (var j=0;j<100 ; j++){

                   var td = document.createElement("td");

                   var text = document.createTextNode((new Date()).getTime());

                   td.appendChild(text);

                   tr.appendChild(td);

                }

               table1.appendChild(tr);

            }

时间:1480587821733-1480587821692=41(ms)

3.(忘记前两种,学这个)document.createDocumentFragment()

DocumentFragment 节点不属于文档树,不过它有一种特殊的行为，当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。当需要对页面DOM进行操作的时候必然会导致多次重绘、回流（下下一个知识点讲）。这样会加大页面的负担。影响页面性能。

document.createDocumentFragment()

var fragment=document.createDocumentFragment()

            for (vari=0;i<100 ; i++){

                                     vartr = document.createElement('tr')

               fragment.appendChild(tr);

                                    

                for(var j=0;j<100 ; j++){

                                                var td = document.createElement('td')

                                                td.innerHTML=(new Date()).getTime();

                                                tr.appendChild(td);

                }

            }

var table1= document.getElementById("mytable1")

table1.appendChild(fragment) 

时间:1480606556072-1480606555944=41(ms)

4.使用DOM的操作

性能显然要比Table对象操作要快。从数据明显可以说明。Table对象的方法其实也是DOM操作。影响性能的取决于页面重绘的次数。显然使用insertRow和inertCell也会导致页面重绘(下一个知识点讲)。100*100次重绘。而使用DOMFragment。页面只重绘了1次。从代码上来看使用Table标准方法的代码比DOM操作的代码要简洁直观一些。

总的来说，对于少量的表格操作，可以使用Table对象自带的方法来操作，对于大量的Table操作还是要使用最优的DOM操作