Dom

来源：互联网发布：一个java多线程代码编辑：程序博客网时间：2024/05/03 18:16

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 属性值操作

① 获取属性值两种方式

元素节点 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样式操作

① 获取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的变量命名规则不允许有“-”中横线)

③ 修改样式，有则修改、无则新增,修改后的样式变为行内样式

0 0