节点的种类:
元素(标签)节点
文本节点 在dom3中被淘汰
文本节点
节点查找
1)找子节点(直接后代)
childNodes 获取子节点 包含空格是text
children 获取子节点
2)找父节点(直接父代)
parentNode 获取父代
parrentChild
获取父元素 parentNode
获取子元素 childNodes children
最后一个子元素 laseChild
第一个子元素 firstChild
下一个兄弟元素 nextSibling
上一个兄弟元素 previousSibling
.节点对象的属性
nodeValue 节点值 (文本)
nodeType 节点类型 1(元素节点),2(属性节点),3(文本节点)
nodeName 节点名称
二、DOM节点的操作
增删改查
1.创建节点
①createElement() 创建元素节点
②CreateTextNode() 创建文本节点 innerHTML innerText
2.插入节点
appendChild() 在父节点中追加子节点
insertBefore(newNode,oldNode) 在指定节点前,插入子节点
3.删除节点
①removeChild() 删除子节点
②remove() 删除节点自身(兼容性)
4.替换节点
replaceChild(newNode,oldNode) 替换指定子节点
5.复制节点
cloneNode(flag) flag 默认为false(不复制子节点) true(复制子节点)
6.节点查询
A.documen.getElementById(id) 节点对象 null
B.document.getElementsByClassName 集合(类数组)
C.getElementsByTagName(tagName) 集合
1)document 调用 在全文中查找
2)node调用,在指定节点下再查找
D. document.getLElementsByName() 集合
E. document.querySelector(selector) 根据选择器查找元素 (注意兼容性)
注意:该方法,只取第一个节点
F. document.querySelectorAll(selector) 根据选择器找元素 ,返回值为集合
7.样式操作
赋值: 节点.style.样式名=值;
取值:
1)节点.style.样式名 只能获取行内样式
2)getComputedStyle(节点,null) 既能取行内又能取样式表
IE低版本使用 currentStyle
8.属性操作
取值:
节点.属性名
节点[属性名]
节点.getAttribute(属性名)
赋值:
节点.属性名
节点[属性名]
节点.setAttribute(属性名,属性值);
注意:在属性和样式操作中,名称的变形 background-color —>backgroundColor
class—>className 等
但是,若使用getAttribute和setAttribute则不需要对属性进行变形
例如:img.getAttribute(‘class’);
三、表格操作
属性:
caption
tBodies
tHead
tFoot
rows 行
cells 列