DOM详解

来源：互联网发布：淘宝话费充值店铺介绍编辑：程序博客网时间：2024/06/02 02:29

什么是DOM

是W3C组织推荐的处理可扩展标志语言的标准编程接口,在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.

换句话说就是:
DOM通过document提供一些能操作页面内容的属性与方法,赋予我们操作页面的能力

DOM: Document Object Moel

DOM结构

graph LRdocument --> 根元素html根元素html --> 元素head元素head --> 元素meta元素meta --> meta文本元素head --> 元素title元素title --> title文本根元素html --> 元素body元素body --> h1元素body --> spanspan --> span文本h1 -->h1文本元素body --> divdiv --> div文本div --> others_divothers_div--> others_div文本div --> targettarget --> target文本元素body --> pp --> p文本

DOM元素之间的关系

父级关系:只有一层上下级关系(从当前往上找)
子级关系:只有一层以下的关系
兄弟关系:有一个父元素的同级元素
父子节点:上下两层节点之间的关系
祖先节点:当前节点上面的所有节点的统称
子孙节点:当前节点下面的所有节点的统称

DOM节点

节点类型节点描述 nodeName nodeValue nodeType element 元素节点元素名 null 1 attribute 属性节点属性名称属性值 2 text 文本节点 text 文本内容 3 CDATASection XMLCDATA片段 cdata-section 节点内容 4 EntityReference 实体引用实体引用名称 null 5 Entity 实体实体名称 null 6 ProcessingInstruction 处理指令 target 节点内容 7 comment 注释 comment 注释文本 8 document 文档 document null 9 DocumentType 文档实体接口 doctype名称 null 10 DocumentFragment 轻量级文档对象 docmentflagment null 11 Notation DTD中声明的符号符号名称 null 12

- node.nodeType 可以通过这个属性查看节点类型

node.childNodes
获取某个节点的所有子节点,返回值是Array类型
node.attribute[0].nodeValue
node.children获取元素的所有元素节点
children不是标准属性,但是所有浏览器都支持
node.parentNode获取元素的父级元素
node.nextElementSibling获取元素的下一个兄弟节点
node.previousElementSibling获取元素的上一个兄弟节点
node.firstElementChild获取元素的第一个节点
node.lastElementChild获取元素的最后一个节点
node.offsetParent:最近的有定位属性的祖先节点,如果所有祖先结点都没有定位,那么默认为body
node.offsetLeft:当前对象外边框到定位父级内边框的距离
node.offsetTop
node.getBoundingClientRect():获取某个元素的信息,通常只有left,right,top,bottom,width,height

示例DEMO

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DEMO</title>    <style>    div {        padding: 100px;    }    #div1 {        background: red;        position: relative;    }    #div2 {        background: green;    }    #div3 {        background: blue;    }    </style></head><body>    <div id="div1">        <div id="div2">            <div id="div3"></div>        </div>    </div>    <ul class="ulDemo">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul>    <script>    var oUl = document.getElementsByTagName('ul')[0];    var oLi = document.getElementsByTagName('li')[1];    var oDiv = document.getElementById('div3');    console.log(oUl.nodeType);    console.log(oUl.childNodes);    console.log(oUl.attributes[0].value);    console.log(oUl.children);    console.log(oLi.parentNode);    console.log(oLi.nextElementSibling);    console.log(oLi.previousElementSibling);    console.log(oUl.firstElementChild);    console.log(oUl.lastElementChild);    console.log(oDiv.offsetParent);    console.log(oDiv.offsetLeft);    console.log(oDiv.getBoundingClientRect())    console.log(oDiv.getBoundingClientRect().left);    console.log(oDiv.getBoundingClientRect().right);    console.log(oDiv.getBoundingClientRect().top);    console.log(oDiv.getBoundingClientRect().bottom);    console.log(oDiv.getBoundingClientRect().width);    console.log(oDiv.getBoundingClientRect().height);    </script></body></html>

元素的属性操作

node.key = value
node[‘key’] = value
node.setAttribute(‘key’,’value’)
node.removeAttribute(‘key’)
node.getAttribute(‘key’)

获取元素的宽高

node.clientWidth
node.clientHeight

(不计算边框)

node.offseteWidth
node.offsetHeight

(计算边框)

document.documentElement.clientWidth
document.documentElement.clientHeight

(可视区域的宽高)

元素操作

创建元素 var node = document.createElement(‘tag_name’)
插入元素
1. parentNode.appendChild(node);
  (向父级元素末尾添加一个元素)
2. parentNode.insertBefore(childNode1,childNode2)
  (向一个节点的指定子节点前边插入一个节点)
3. parentNode.removeChild(childNode)
  (从一个节点中删除指定的子节点)
4. parentNode.replaceChild(node,childNode)
  (从一个节点中用指定节点替换指定子节点)
克隆元素
node.cloneNode(boolean)
(克隆一个节点)
true:克隆元素和元素包含的子孙节点
false:克隆元素但不包含元素的孙子节点

表格的操作

<table>    <thead>        <tr>            <td>head1</td>            <td>head2</td>        </tr>    </thead>    <tbody>         <tr>            <td>message1</td>            <td>message2</td>        </tr>         <tr>            <td>message3</td>            <td>message4</td>        </tr>    </tbody>    <tfoot>        <tr>            <td>foot1</td>            <td>foot2</td>        </tr>    </tfoot></table><script>    var tableNode= document.getElementsByTagName('table')[0];</script>

tableNode.tHead Object
tableNode.tFoot Object
tableNode.tBodies Object Array
tableNode.rows Object Array
tableNode.rows[0].cells Object

0 0