DOM 文档类型函数

偏执的太偏执、 2023-02-24 08:24 18阅读 0赞

## 节点的种类： ##

元素（标签）节点
    文本节点    在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 列