脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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 在单元格中插入内容

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操作

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(&#39;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操作

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Dom基础（节点常用属性方法和table)全部内容，希望文章能够帮你解决javascript代码实例教程-Dom基础（节点常用属性方法和table)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。