1、DOM操作分为:
DOM Core,HTML-DOM,CSS-DOM。
2、节点和节点关系
整个文档是一个文档节点
每个html标签是一个元素节点
包含HTML元素中的文本是文本节点
每个HTML属性是一个属性节点
创建节点和插入节点
名称 | 描述 |
---|---|
createElement(tagName) | 创建一个标签名为tagNme的新元素节点 |
A.addendChild(B | 把B节点追加至A节点的末尾 |
insertBefore(A,B | 把A节点插入B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
创建和插入
function tianjia() {
var an=document.getElementById("div"); //获取div id
var an2=document.createElement("img"); //添加一个img节点
an2.setAttribute("src","images/shoppingBg.jpg"); //添加节点属性
an2.setAttribute("id","tupian"); //添加节点属性
an.appendChild(an2); //将新节img点插入div中
}
名称 | 描述 |
---|---|
removeChild(node) | 删除指定节点 |
replaceChild(newNode,oldNode) | 用其他的节点替换指定节点的节点 |
删除节点
function shanxhu() {
var an=document.getElementById("tupian"); //获取img id
an.parentNode.removeChild(an); //id.父节点.removeChild属性实现删除节点
}
替换节点
function xiugai() {
var an=document.getElementById("tupian"); //获取img id
var an2=document.createElement("img"); //用createElement属性创建一个img节点
an2.setAttribute("src","images/shoppingBg.jpg");//给img节点属性赋值
an2.setAttribute("id","tupian"); //给img节点属性赋值
an.parentNode.replaceChild(an2,an); //用新的img节点替换掉老的
}
操作节点样式
1.style属性
使用style属性改变样式的语法如下:
HTML 元素.style.样式属性="值";
在页面中有一个 id 为titles的div,要改变div中的字体颜色为红色,字体大小为25px,代码如下所示
document.etElementById("titles").style.color="#ff0000"; //改变颜色属性
document.etElementById("titles").style.fontSize"25px"; //改变字体大小
2.className属性
className属性设置或放回元素的clss样式
HTML 元素.clssName="样式名称";