DOM
课前介绍:
DOM:document object model 文档对象模型
dom是一种技术,允许开发者通过JavaScript来操作HTML/XML
在DOM中,会把HTML页面描绘成一个由节点组成的倒立树。
节点:12种 常见的有:元素节点(标签)、属性节点(属性)、文本节点(内容)
节点的关系:父子 (父节点、子节点) 兄弟(兄弟节点)
一、获取节点
1.获取子节点
-
childNodes 包含元素节点和文本节点
-
children 元素节点
children和childNodes都是集合(伪数组) 索引 length
<div id="box">
<div>AAA</div>
<p>BBB</p>
</div>
var o = document.getElementById('box');//元素节点对象
// console.log(o, typeof o);
console.log(o.childNodes);//子节点 元素节点/文本节点 5个
console.log(o.children);//子节点 元素节点 2个
2.获取父节点
parentNode 返回值是一个元素节点对象
offsetParent 定位的父节点 没有定位—>body
3.节点属性
- nodeType 节点的类型
- 元素节点 1
- 属性节点 2
- 文本节点 3
- nodeName 节点的名称 一般用于元素节点 DIV P SPAN
- nodeVaule 节点的内容 一般用于文本节点
4.其它获取节点的属性
-
第一个子节点
- firstChild 第一个子节点(文本节点/元素节点)
- firstElementChild 第一个子节点(元素节点)
-
最后一个子节点
- lastChild 最后一个子节点(文本节点和元素节点)
- lastElementChild 最后一个元素节点
-
上一个兄弟节点
- previousSibling 元素/文本 节点
- previousElementSibling 元素节点
-
下一个兄弟节点
- nextSibling 元素/文本节点
- nextElementSIbling 元素节点
二、节点的操作
通过JavaScript来对HTML进行增删改查
1.创建/增加节点
1)创建节点
- createElement(tagName) 创建一个元素节点对象
- createTextNode() 创建文本节点对象
2)添加节点:
- appendChild() 在父节点中末尾追加子节点
- insertBefore() 在指定节点前插入节点对象
- 父节点.insertBefore(newChild,oldChild)
2.删除节点:
- remove() IE8+ 删除节点(自杀)
- removeChild() 删除指定子节点
// o.removeChild(oC);//删除子节点
oC.remove();//删除自身 “自杀”
3.替换节点
replaceChild(newChild,oldChild); 替换节点
var oDiv=document.createElement('div');//创建的新的div标记
oDiv.innerHTML="hello world";
var o=document.getElementById('box'); //父节点
var op=o.children[0];//要被替换的节点
o.replaceChild(oDiv,op);
4.复制/克隆节点
cloneNode(flag) 复制节点
注意:flag是一个布尔类型,默认为false,不复制子节点,只复制标签自身。true ,复制子节点
三、知识补充
1.节点查找方法补充
根据ID,根据tagName、className找元素
根据选择器找元素:
- querySelector() 根据选择器找元素 若有多个匹配元素,只取第一个
- querySelectorAll() 根据选择器获取所有匹配的元素 返回值是:伪数组
注意:这两个方法不支持低版本浏览器
2.属性操作
- 对象.属性名
- 取值: 对象.属性名 例如:img.src
- 赋值: 对象.属性名=值
- 对象[属性名]
- 取值: 对象[属性名]
- 赋值: 对象[属性名]=值
- 通过方法来实现属性操作
- getAttribute(属性名)
- setAttribute(属性名,属性值)
var o = document.querySelector('img');
// o.src="./img/2.JPG";
// o['src']="./img/3.JPG";
// console.log(o.src);
// o.tag='111';//代码中自定义属性
// console.log(o.tag);
// o.setAttribute('src','./img/4.JPG')
// console.log(o.getAttribute('src'));//相对路径
// console.log(o.tag);//undefined
// console.log(o['tag']);//undefined
console.log(o.getAttribute('tag'));
<img src="./img/1.JPG" alt="" tag="222">
注意:若需要取出HTML标签中自定义的 属性的值,对象.属性名和对象[属性名]均取不到值(undefined),可以通过getAttribute()方法来取出HTML标签中自定义属性的值。
3.常见DOM对象补充
document对象:文档对象
document.body : body节点对象
document.documentElement: html页面对象
四、表格操作
表格节点对象的常见的属性
- tHead
- caption 标题
- tBodies 集合------------> tBodies[0]
- tFoot
- rows 行 集合
- cells 列 集合