重温DOM
Element 对象
nodeType
| Backcall | Node |
|---|---|
| 1 | 标签节点 |
| 2 | 属性节点 |
| 3 | 文本节点 |
| 5 | 注释节点 |
| 9 | 根节点 |
nodeName
-
如果节点是元素节点，则 nodeName 属性返回标签名。
-
如果节点是属性节点，则 nodeName 属性返回属性的名称。
Query Node
//根据ID名查找
element.getElementById('');
//根据标签名来查找
element.getElementsByTagName('');
//根据类名来查找
element.getElementsByClassName('');
//根据name属性来查找(通常是一组单选复选元素)
element.getElementsByName('');
//=============================
//根据 CSS 选择器规范，便捷定位文档中指定元素
element.querySelector('');
element.querySelectorAll(''); //复数
node树
| 语法 | 作用 |
|---|---|
node.appendChild(node) |
向元素添加新的子节点，作为最后一个子节点。 |
node.attributes
|
返回元素属性的 NamedNodeMap。 |
element.childNodes
|
返回元素子节点的 NodeList。 |
HTMLElementObject.className=classname |
设置或返回元素的 class 属性。 |
element.clientHeight
|
返回元素的可见高度。(不包含border-width,padding) |
element.clientWidth
|
返回元素的可见宽度。(不包含border-width,padding) |
element.cloneNode(deep) |
克隆节点，参数默认为false,设置为true则会克隆属性及其后代 |
node.firstChild
|
返回首个子节点 |
element.getAttribute(attributename) |
返回指定属性名的属性值 |
element.getBoundingClientRect() |
返回元素的'左上右下'的相对浏览器视窗的位置以及宽、高度 |
element.hasAttribute(attributename) |
判断是否存在某属性 |
node.hasChildNodes() |
判断元素是否有用子节点 |
element.id
|
设置或返回元素的 id |
HTMLElementObject.innerHTML=text |
设置或返回元素的内容(包含节点) |
node.insertBefore(newnode,existingnode) |
在指定的已有子节点之前插入新创建或剪切的子节点 |
node.lastChild
|
返回指定节点的最后一个子节点 |
node.nextSibling
|
返回指定节点下一个兄弟节点 |
node.nodeValue=value |
设置或返回指定节点的节点值 |
element.offsetHeight
|
返回元素的高度。(包含border-width以及padding值) |
element.offsetWidth
|
返回元素的宽度。(包含border-width以及padding值) |
element.offsetLeft
|
返回元素的水平偏移位置。 |
element.offsetParent
|
返回元素的偏移容器。 |
element.offsetTop
|
返回元素的垂直偏移位置。 |
element.parentNode
|
返回元素的父节点。 |
element.previousSibling
|
返回指定节点上一个兄弟节点 |
element.removeAttribute(attributename) |
移除元素中的指定属性。 |
element.removeAttributeNode(attributenode) |
移除元素中的指定属性 ，并返回被移除的节点。 |
node.removeChild(node) |
从元素列表中删除一个 |
node.replaceChild(newnode,oldnode) |
替换元素中的子节点。 |
element.scrollHeight
|
返回元素的整体高度。 |
element.scrollLeft
|
返回元素左边缘与视图之间的距离。 |
element.scrollTop
|
返回元素上边缘与视图之间的距离。 |
element.scrollWidth
|
返回元素的整体宽度。 |
element.setAttribute() |
把指定属性设置或更改为指定值。 |
element.style
|
设置或返回元素的 style 属性。 |
element.tagName
|
返回元素的标签名。 |
element.textContent
|
设置或返回节点及其后代的文本内容。 |
element.title
|
设置或返回元素的 title 属性。 |
element.toString() |
把元素转换为字符串。 |
nodelist.item(index) |
节点列表中位于指定索引的节点 |
| table.tHead | 获取表格头部 |
| table.tFoot | 获取表格底部 |
| table.tBodies | 获取表格主体集合 |
| tBodies[n].rows[n]/tHead.rows[n]/tFoot.rows[n] | 获取某一行 |
| rows[n].cells[n] | 获取某一行的某一列 |
网友评论