DOM介绍:文档对象模型
为了方便javascript语言通过dom操作html比较方便;
HTML中节点分类:
1.文档节点(document)
2.元素节点
3.文本节点
4.属性节点
5.注释节点
节点的选择
1.document.getElementById(id属性值);
2.document.getElementsByTagName(tag标签名称);
3.document.getElementsByName(name属性值);不推荐
注:1.收集的元素都是以字符串的形式返回的
获得文本节点的方法(Nodes:节点)
var dd = document.getElementsByTagName(‘div’)[0];
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息
获取属性值
1. 获取属性值
itnode.属性名称;
itnode.getAttribute(属性名称);
2.设置属性值
itnode.属性名称 = 值;
itnode.setAttribute(名称,值);
属性节点的获取
var attrlist = itnode.attributes;
attrlist.属性名称;
节点的创建
元素节点:document.createElement(tag标签名称);
文本节点:document.createTextNode(文本内容);
属性设置:node.setAttribute(名称,值);
节点的增加
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
获取css样式
元素节点.style.css样式名称;
divnode.style.width; //获取宽度样式
设置css样式(有则修改、没有则添加)
元素节点.style.css样式名称 = 值;
divnode.style.width =‘500px’;设置div宽度样式