DOM 文档类型函数

节点的种类:

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值