dom: document object model 文档对象模型
DOM技术:
php里边有:php语言 与 xml/html标签之间沟通的一个桥梁。
javascript里边有:js语言 与 html/xml标签之间沟通的一个桥梁。
把html文档的各个组成内容划分为各种节点(对象):
文档节点(document),其是html根节点的父节点
元素节点
文本节点
属性节点
注释节点
2.元素节点获取
getElementById(id属性值) getElementsByTagName(tag标签名称)
3. 文本节点获取
<div>hello</div>
需要借助div元素节点再获得其内部的文本节点:
div元素节点对象.firstChild; //或调用lastChild,获得节点内部的第一个子节点
文本节点.nodeValue; //获得文本节点对应的文本信息
4. 子节点/兄弟节点
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下一个兄弟节点
previousSibling:获得上一个兄弟节点
childNodes:父节点获得内部全部的子节点信息
length: 获得“集合列表”的长度
以上属性在主流浏览器(火狐firefox、chrome、safari、opera、IE9以上)中会给考虑空白节点(回车、空格)。在IE(6/7/8)浏览器中不考虑空白节点。
空白节点本质:其是文本节点
5.父节点
节点.parentNode;
6.1 属性值操作
<input type=”text” name=”username” value=”tom” class=”orange” />
<a href=”http://www.baidu.com” addr=’beijing’ target=”_blank”>百度</a>
① 获取属性值 两种方式
元素节点 node.属性名称; //只能操作w3c规定的属性
元素节点 node.getAttribute(属性名称); //规定的 和 自定义的属性都可以获取
② 设置(修改)属性值 两种方式
元素节点 node.属性名称 = 值; //只能操作w3c规定的属性
元素节点 node.setAttribute(名称,值); //规定的 和 自定义的属性都可以设置
6.2 属性节点获取
var attrlist = 元素节点对象.attributes; //以“数组列表”形式返回对应节点内部的全部属性节点信息
attrlist.属性名称; //获得具体属性节点值
获得节点类型nodeType:
节点.nodeType:
返回值:1------> 元素节点 2------> 属性节点 3------> 文本节点
9------> 文档节点
7. 节点创建和追加
节点创建
元素节点:document.createElement(tag标签名称);
文本节点:document.createTextNode(文本内容);
属性设置:node.setAttribute(名称,值);
节点追加:
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
单个节点的创建追加
8. 节点复制操作
被复制节点.cloneNode(true/false);
true:深层复制(本身节点 和 其内部节点)
false:浅层复制 (本身节点)
9. 节点删除
父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);
10. dom对css样式操作
<div style=”width:300px;height:200px; background-color:pink;”></div>
① 获取css样式
元素节点.style.css样式名称;得到值
divnode.style.width; //获取宽度样式
② 设置css样式(有则修改、没有则添加)
元素节点.style.css样式名称 = 值;
divnode.style.width =‘500px’;设置div宽度样式
注意:
① dom操作css样式只能操作“行内样式”(css样式分为 行内、内部、外部)
② 操作复合样式例如background-color/border-left-color,font-size
需要变为backgroundColor、borderLeftColor,fontSize中恒线去掉,后边首字母大写。(原因:javascript的变量命名规则不允许有“-”中横线)
③ 修改样式,有则修改、无则新增,修改后的样式变为行内样式