当前位置：网站首页>DOM基础操作

DOM基础操作

2022-07-19 23:36:00 【smile_pbb】

一、DOM简介

DOM:文档对象模型:
它是一套操作HTML和XML文档的API
DOM可以把HTML和XML描述为一个文档树，树上的每一个分支都可以视为一个对象。通过DOM可以添加、修改和移除文档上的某一部分。

概念含义
文档就是指的html或是xml
节点html文档中的所有文件内容都可以称之为节点
元素html中的标签可以成为元素
文档元素文档中的第一个元素。html中的文档元素就是
文本节点标签里的内容
属性节点标签中的属性

DOM的作用：

​ 找对象（元素）
​ 设置元素的属性
​ 设置元素的样式
​ 动态创建元素
​ 绑定事件

二、获取元素的方法

1.根据ID获取

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

document.getElementById('id名称')

例子：

<img src="image/kitty.png"  id="demon" title="小猫" >
 <script>
        var demon = document.getElementById("demon")
        console.log(demon)
 </script>

2.根据类名获取

documnet.getElementsByClassName("类名称")

3.根据选择器获取来获取

这个可以说是上边1和2的集合

document.querySelector('.abc')
document.querySelectOR('#abc')

4.根据标签名获取

获取到所有的标签名对应的元素

document.getElementsByTagName('标签名')

实例：

<!DOCTYPE html>
<html>
	<style> #test {
      width:200px;height:200px;background:yellow;} #test1 {
      width:200px;height:200px;background:blue;} .test2 {
      width:200px;height:200px;background:red;} </style>
	<body>
		<div id="test"></div>
		<div class="test2"></div>
		
	</body>
	<script> var test = document.getElementById("test"); var test2 = document.getElementsByClassName("test2"); var test3 = document.querySelector("#test") var test4 = document.querySelector(".test2") console.log(test); console.log(test2); console.log(test3); console.log(test4); </script>
</html>

三、操作对象

获取完毕节点之后要操作节点。
主要是操作两方面：

1.操作内容

1.1.文本内容

获取文本:     元素.innerText
设置文本内容:  元素.innerText = "新内容"

例子：

<html>
        <head>
                <meta charset="utf-8">
                <style> * {
       margin:0px; padding:0px; } /* #data { height:200px; width:200px; } #data1 { height:200px; } */ </style>
        </head>
        <body>
                <div id=data>测试数据</div>
                <div id=data1>测试数据1</div>
        </body>

        <script> var data = document.querySelector("#data"); data.onclick = function abc() {
       data.innerText = '张三'; } </script>

</html>

或者

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>改变HTML内容</title>
        </head>
    
<body>

        <p id="p1">Hello World!</p>
        <button onclick="abc()">按钮</button>
</body>
    
<script> function abc() {
       document.getElementById("p1").innerHTML="新文本!"; } </script>
</html>

2.操作元素的属性

1.原生属性

原生属性就是标签自带的属性

获取：
	元素.属性名

设置：
	元素.属性名 = ‘属性值’


<html>
        <head>
                <meta charset="utf-8">
                <style> * {
       margin:0px; padding:0px; } #data {
       height:200px; width:200px; background:yellow; } .data1 {
       height:200px; width:200px; background:pink; } </style>
        </head>
        <body>
                <button>按钮 </button>
        </body>

        <script> var data = document.querySelector("button"); data.onclick = function abc() {
       data.id = 'data'; } </script>

</html>

注意：如果给元素添加类选择器语法是：

获取的元素.className = "类选择器"

2.自定义属性

自定义属性就是就是我们自己定义的属性，没有特殊意义，只是记录信息

原网站

版权声明
本文为[smile_pbb]所创，转载请带上原文链接，感谢
https://blog.csdn.net/smile_pbb/article/details/125873771

边栏推荐

猜你喜欢

随机推荐