DOM详解_div dom 关系-CSDN博客

本文链接：https://blog.csdn.net/qq_17347575/article/details/71035988

什么是DOM

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

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

DOM: Document Object Moel

DOM结构

graph LR
document --> 根元素html
根元素html --> 元素head
元素head --> 元素meta
元素meta --> meta文本
元素head --> 元素title
元素title --> title文本

根元素html --> 元素body
元素body --> h1

元素body --> span
span --> span文本
h1 -->h1文本
元素body --> div
div --> div文本
div --> others_div
others_div--> others_div文本
div --> target
target --> target文本
元素body --> p
p --> 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>