DOM（文档对象模型）

最新推荐文章于 2024-10-15 09:57:04 发布

kkugaii

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量129

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/kkugaii/article/details/125397245

版权

DOM

DOM简介
- - 什么是DOM
  - DOM树
DOM元素
节点

DOM简介

什么是DOM

DOM是文档对象模型（Document Object Model）的简称，是W3C组织推荐的处理可拓展标记语言的标准编程接口。
可以通过这些接口改变网页的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

DOM树

在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中的所有标签都是元素，DOM中使用element表示。
节点：网页中的所有内容都是节点，如标签，属性，文本，注释等，DOM中使用note表示。

DOM把以上内容都看作是对象

DOM元素

事件

事件三要素

1.事件源：事件被触发的对象
2.事件类型：如何触发事件（如鼠标点击等）
3.事件处理程序：通过一个函数赋值的方法

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmousedown	鼠标按下触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点出发
onblur	失去鼠标焦点触发

执行事件步骤

1.获取事件源

2.绑定事件注册事件

3.添加事件处理程序

代码举例：

<body>
    <div>123</div>
    <script>
        //1.获取事件源
        var div = document.querySelector('div');
        //2.绑定事件 注册事件
        // div.onclick
        //3.添加事件处理程序
        div.onclick = function(){
            console.log('我被选中了');
        }
    </script>
</body>

获取元素

根据ID获取

getElementeByld('id名')

根据标签名获取

<script>
	getElementsByTagName('li')  //获取文档中全部的'li'
	var ol=document.getElementsByTagName('ol')  //先给'ol'定义一个标签名
	ol.getElementsByTagName('li')  //获取的'li'为'ol'中的'li'
</script>

新增获取方法

1.类名

document.getElementsByClassName('类名')

2.指定选择器第一个元素对象

document.querySelector('选择器')

3.返回指定选择器所有元素

document.querySelectorAll('选择器')

获取特殊元素

1.获取body

document.body;

2.获取html

document.documentElement;

操作元素

改变元素内容

innerText和innerHTML

innerText：从起始位置到终止位置的内容，去除html标签，同时空格和换行也会去掉。
innerHTML：从起始位置到终止位置的内容，包括html标签，同时保留空格和换行。

操作常见元素属性
src 、href
id 、alt 、title
操作表单元素属性
type 、value 、checked 、selected 、disabled

样式属性操作

可以通过JavaScript修改元素的大小、颜色、位置等样式。

1.element.style 行内样式操作

在样式比较少或者功能比较简单的情况下使用

2.element.className 类名样式操作

在样式比较多或者功能比较复杂的情况下使用

排他思想

如果有同一种元素，我们想要某一种元素实现某种样式，需要用到循环的排他思想算法

步骤如下：

1.所有元素全部清除样式

2.给当前元素设置样式

代码举例：

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
            var btns = document.getElementsByTagName("button");
            for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = "";
      }
      this.style.backgroundColor = "pink";
    };
  }
</script>

</body>

代码结果：
在这里插入图片描述

自定义属性

设置属性值：

1.设置内定属性值

element.属性 = '属性值'

2.设置自定义的属性

element.setAttribute('属性','值');

节点

什么是节点

网页中的所有内容都是节点，如标签，属性，文本，注释等，DOM中使用note表示。

HTML树中所有节点就可以通过JavaScript访问，所有HTML元素均可以被修改，也可以被创建或者删除

节点一般拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）这三个属性

节点类型

元素类型	nodeType
元素节点	1
属性节点	2
文本节点	3
注释节点	8
文档节点	9

节点名称

元素节点的nodeName与标签名相同

属性节点的nodeName与属性名相同

文本节点的nodeName始终是#text

文档节点的nodeName始终是#document

节点值

元素节点的nodeValue是undefined或null

文本节点的nodeValue是文本本身

属性节点的nodeValue是属性值

节点层级

通过DOM树可以把节点划分为不同的层级，常见的层级是父子层级和兄弟层级。

1.父子节点

父级节点

node.parentNode

parentNode属性可以返回某节点的父节点，是最近的父节点。

如果指定的节点没有父节点，则返回null。

子节点

parentNode.childNodes

parentNode.childNodes是一个只读属性，返回所有的子元素节点，其余节点不返回

返回包含指定节点的子节点的集合，集合为及时更新的集合。

返回值中包含所有的节点，包括元素节点，文本节点等。

想要获得里面的元素，节点需要专门处理。

parentNode.firstElementChild

返回第一个字元素节点，找不到则返回null

parentNode.lastElementChild

返回最后一个字元素节点，找不到则返回null
2.兄弟节点

node.nextElementSibling

返回当前元素下一个兄弟元素节点，找不到则返回null

node.previousElementSibling

返回当前元素上一个兄弟元素节点，找不到则返回null

添加节点、删除节点、复制节点

1.添加节点

node.appendChild()

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾

node.insertBefore()

node.insertBefore()方法将一个节点添加到指定父节点的子节点列表前面

代码举例：

<body>
    <ul>
        <li>添加节点</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 创建节点
        var li = document.createElement('li');
        // appendChild() 添加到末尾
        ul.appendChild(li);
        console.log(ul);
    </script>
</body>

2.删除节点

node.removeChild()

ode.removeChild()方法从DOM中删除一个子节点，返回删除的节点

代码举例：

<body>
    <ul>
        <li>删除节点1</li>
        <li>删除节点2</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.removeChild(ul.children[0]);
        console.log(ul);
    </script>
</body>

3.复制节点

node.cloneNode()

node.cloneNode()方法返回调用该方法的结点的一个副本，不克隆里面的子节点

代码举例：

<body>
    <ul>
        <li>复制节点1</li>
        <li>复制节点2</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var li1 = ul.children[0].cloneNode(true);
        var li2 = ul.children[1].cloneNode();
        ul.appendChild(li1);
        ul.appendChild(li2);
        console.log(ul);
    </script>
</body>