DOM操作

已于 2022-07-25 20:07:25 修改
阅读量2.1k 收藏 7
点赞数 2
文章标签： javascript 前端 html
于 2022-07-14 20:04:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53566222/article/details/125777137
版权

什么是DOM操作

DOM：是当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
把文档中的代码翻译成一个对象模型
在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象
这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等
1.只有一个根节点document
2.除了根节点外所有节点都有唯一的一个父节点
3.document是window对象的属性
4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象
BOM操作会在接下来的知识点讲到 它不属于标准的接口 但是浏览器厂商都提供了几乎一样的功能
5.元素的属性也是独立节点 叫属性节点 但是不是元素节点的子节点
来源是w3schoo
本图来自（w3school）
DOM操作详细介绍请访问：https://www.w3school.com.cn/js/js_htmldom_elements.asp

通过方法获取节点

在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
访问 HTML 元素最常用的方法是使用元素的 id。

var div1=document.getElementById("m1") 依靠id来获取元素节点/如果没有就返回null（不是id选择器）
var arr=document.getElementsByClassName("m2")  依靠calss来获取元素节点（不是class选择器）
var inps=document.getElementsByTagName("i")   依靠标签的名字来获取元素节点（不是标签名选择器）
var arr=document.getElementsByName("food1") 依靠name属性的值
H5自带的
var el=document.querySelector(".m2")  若符合选择器的第一个元素/null
var arr=document.querySelectorAll(".box2")  符合选择器的所有元素/[]


document.body  body标签
document.forms  form表单们
document.anchors a标签们
document.images 图片们
document.links 连接们
document.URL 当前文档的网址

通过关系获取节点

<div id="box1">hello
    <div class="box2" id="box4">2</div>
    <div class="box2">
        <div class="box5" id="box3">box3</div>
    </div>
    <div class="box2" id="box6">4</div>
</div>

1.父级 父元素和父节点是同一个
var re=document.getElementById("box4").parentElement//父元素
var re=document.getElementById("box4").parentNode//父节点
console.log(re)

2.子级 子元素和子节点不一定是同一个
var son1=document.getElementById("box1").children//返回值是子元素们 没有返回空数组
console.log(son1)
var son1=document.getElementById("box1").childNodes //返回值是子节点们 没有返回空数组
console.log(son1)

3.兄弟
var re = document.getElementById("box4").nextSibling//下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("box2").nextElementSibling//下一个兄弟元素 没有返回null
console.log(re)
var re=document.getElementById("box3").previousSibling//上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("box3").previousElementSibling //上一个兄弟元素 没有返回null
console.log(re)			


            
4.第1个子节点
var son1=document.getElementById("box1").firstChild
var son2=document.getElementById("box1").firstElementChild
console.log(son1,son2)
			
			
5.最后一个子节点
var son1=document.getElementById("box1").lastChild
var son2=document.getElementById("box1").lastElementChild
console.log(son1,son2)

			
6.获取自己是父元素中的第几个子元素/节点
自己实现这个方法:调用者是父元素中的第几个元素 .index()						
 Object.prototype.index2=function() {
 	console.log(this)
 	var arr=this.parentElement.childNodes
 	for (let i = 0;i<arr.length;i++) {
 		if(this==arr[i]){
 			return i
			}
 	}
 }
 var index=document.getElementById("box4").index2()
console.log(index)
												
7.父元素中的第几个子元素/节点					
var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点

元素无text，没有返回null。节点有text，没有返回null。
1.父节点
在这里插入图片描述

2.子节点
在这里插入图片描述

返回值是子元素们 没有返回空数组(上面个图)
在这里插入图片描述返回值是子节点们 没有返回空数组(上面个图)
总的图
在这里插入图片描述
3.兄弟节点
在这里插入图片描述
4.第一个子节点
在这里插入图片描述

5.最后一个子节点
在这里插入图片描述
6.1当为childNodes时（子节点）
从0开始数

        Object.prototype.index2 = function () {
            console.log(this)
            var arr = this.parentElement.childNodes
            for (let i = 0; i < arr.length; i++) {
                if (this == arr[i]) {
                    return i
                }
            }
        }
        	var box = document.querySelector("#box6")
			console.log(box.index2())

结果
在这里插入图片描述
6.2当为children时（子元素）

			Object.prototype.index1=function(){
			 console.log(this)
				var arr=this.parentElement.children
				for(let i=0;i<arr.length;i++){
					if(arr[i]===this){
						return i
					}
				}				 
			}
			var box = document.querySelector("#box6")
			console.log(box.index1())

结果
在这里插入图片描述
7.父元素中的第几个子元素/节点
在这里插入图片描述

表格的隔行变色

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            width: 380px;
            height: 50px;
        }
    </style>
</head>

<body>
    <table border="1px"cellspacing='0'>

        <tr class="m1">
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr class="m1">
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr class="m1">
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr class="m1">
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        
    </table>

script

    <script>
        var m=document.getElementsByClassName('m1')   
        for(let i=0;i<m.length;i++){
            console.log(i%2,1111)
            if(i%2){
                m[i].style.backgroundColor='red'
            }else{
                m[i].style.backgroundColor='blue'
            }
        }
    </script>

结果
在这里插入图片描述

百度换肤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			body{
				background-image: url(./src/7.jpg);
				background-size: 100% 800px;
			}
			img{
				width: 120px;
				height: 60px;
			}
		</style>
		<img src="填你自己的地址">
		<img src="填你自己的地址">
		<img src="填你自己的地址">

第一种

		</script>
			var imgs=document.getElementsByTagName("img")
			var srcarr=["填你自己的地址","填你自己的地址","填你自己的地址"]
			for(let i=0;i<imgs.length;i++){
				imgs[i].onclick=function(){
					document.body.style.backgroundImage=`url("${srcarr[i]}")`
				}
			}			
		</script>

第二种

		document.body.style.backgroundImage=`url("填你自己的地址")`
		var imgs=document.getElementsByTagName("img")
		imgs[0].onclick=function(){
		document.body.style.backgroundImage=`url("${imgs[0].src}")`或者你自己的地址
		}
		imgs[1].onclick=function(){
		document.body.style.backgroundImage=`url("${imgs[1].src}")`或者你自己的地址
		}
		imgs[2].onclick=function(){
		document.body.style.backgroundImage=`url("${imgs[2].src}")`或者你自己的地址
		}

效果

Document - Google Chrome

下拉菜单

    <style>
        .dropbtn{
            width: 200px;
            height: 40px;
            background-color: red;
            border-radius: 5px;
            line-height: 40px;
            padding-left: 20px;
            cursor: pointer;
        }
        .dropmenu{
            width: 300px;
            height: 0px;
            border-radius: 5px;
            background-color: chartreuse;
            padding-left: 20px;
            overflow: hidden;
        }
    </style>

    <div class="dropbtn">
        btn
    </div>
    <div class="dropmenu">
        <div class="box">hello</div>
        <div class="box">hello</div>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

        // 设定值=当前+(差量)*百分比  差量就是目标值减去当前值
        window.onload=function(){
            var dropbtn=document.querySelector('.dropbtn')
            var flag=true;
            var timer=null;
            var dropmenu=document.querySelector('.dropmenu')
            dropbtn.addEventListener('click',function(e){
               if( flag=!flag){
                clearInterval(timer)
                dropmenu.style.height='0px'
               }else{
                timer=setInterval(()=>{
                let h=window.getComputedStyle(dropmenu).height
                dropmenu.style.height=parseInt(h)+(500-parseInt(h))*0.5+'px'

              },30)
               }
            })
        }

效果

下拉菜单效果

信息滑入

    <style>
        .goods{
            position: relative;
            width: 275px;
            height: 183px;
            overflow: hidden;
        }
        .introduce{
            position: absolute;
            width: 275px;
            height: 60px;
            top:183px;
            text-align: center;
            line-height: 60px;
            background-color:rgba(129, 148, 170, 0.5);
        }
    </style>
    <div class="goods">
        <img src="./images.jfif" alt="">
        <div class="introduce">太空的蝴蝶</div>
    </div>

    <script>
        var goods=document.querySelector('.goods')
        var timer=null;
        var result=123;
        goods.addEventListener('mouseenter',()=>{
            clearInterval(timer)
            result=123;
            var introduce=document.querySelector('.introduce')
            timer=setInterval(()=>{
                introduce.style.top=introduce.offsetTop+(result-introduce.offsetTop)*0.7+'px'
            },20)
        })
        goods.addEventListener('mouseleave',()=>{
            result=183
        })
    </script>

效果

信息滑入

模态窗口拖拽效果

    <style>
        .modelbox{
            width: 100%;
            height: 800px;
            background-color: rgba(129, 148, 170, 0.7);
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 10000;
        }
        .loginbox{
            width: 400px;
            height: 240px;
            border-radius: 10px;
            background-color: white;
            position: absolute;
            left: 400px;
            top: 200px;
            cursor: move;
        }
    </style>
    <button id="btn">登录</button>

   <script>
        document.querySelector('#btn').onclick=function(){
            var modelbox=document.createElement('div')
            modelbox.classList.add('modelbox')
            document.body.appendChild(modelbox)

            var loginbox=document.createElement('div')
            loginbox.classList.add('loginbox')
            modelbox.appendChild(loginbox)
            loginbox.addEventListener('mousedown',(e)=>{
                document.onmousemove=null
            })
            
            loginbox.addEventListener('mousedown',(e)=>{
                // 获取鼠标按下时的xy：相对于视口
                let x=e.screenX
                let y=e.screenY
                let divtop=loginbox.offsetTop
                let divleft=loginbox.offsetleft
                document.onmousemove=(e2)=>{
                    // 获取鼠标滑动过程中的xy：相对于视口
                let x2=e2.screenX
                let y2=e2.screenY
                loginbox.style.top=divtop+(y2-y)+'px'
                loginbox.style.left=divleft+(x2-x)+'px'
                }

            })
        }
    </script>

效果，没做好
在这里插入图片描述
在这里插入图片描述

放大镜

et1125
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM 知识点总结
m0_67256600的博客
06-29 312
DOM DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作文档: 文档就是表示整个html网页文档 对象：对象就是表示将网页中的每一个部分都转换为了一个对象 模型：用模型来表示对象之间的关系，这样方便我们获取对象 常用节点 节点的类型：Document, DocunentType,Element,Text,Comment,D
DOM的操作
Mr_115的博客
11-01 2528
DOM的操作
DOM常见的操作有哪些
一步一个脚印，踏实努力，向着目标前进
08-13 1547
DOM（文档对象模型）是一种用于表示和操作HTML和XML文档的标准。在JavaScript中，可以使用DOM API来对DOM进行操作。
DOM操作（增删改查）详解
qq_44709805的博客
11-26 3653
一、DOM操作 1.DOM概念 当网页被加载时，浏览器会创建页面的文档对象模型DOM DOM：Document Object Model 注:DOM说明 在DOM中，每个东西都是节点： 文档本身就是一个文档对象 所有html元素都是元素节点 所有html属性都是属性节点 插入到html元素文本是文本节点（包括空格，回车，换行等） 注释是注释节点 2. DOM操作 注：在DOM加载完之后再执行相关js操作 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML
javaScript:什么是DOM操作?DOM节点？
最新发布
qq_52799985的博客
09-05 428
DOM 操作指的是使用 JavaScript 通过文档对象模型（DOM）来操纵网页中的 HTML 元素和内容。DOM 是一个树状结构，表示网页的结构和内容，它允许开发者通过 JavaScript 修改、添加、删除或查询网页中的元素和属性。
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
易语言DOM操作
08-20
易语言DOM操作源码系统结构:易语言DOM操作源码,DOM操作 ======窗口程序集1 || ||------_按钮1_被单击 || ||------_超文本浏览框1_状态文本被改变 || ||------_按钮2_被单击 || ||------_按钮3_被单击 |
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
Dom操作介绍
sinat_31907813的博客
09-25 1022
1.dom指的是什么? document文档 object 对象 model模型，Dom翻译中文：文档对象模型 2.在js中，js的底层由不同的人员开发出来，一共分成三部分： 1. 基本语法[ECMA] 2. Bom Browser Object Model 浏览器对象模型，例如，浏览器的版本信息、浏览器的页面跳转、浏览器页面刷新 3. DOM 文...
什么是DOM及DOM操作？
W Y L
01-02 2015
什么是 DOM ? DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。 W3C文档对象模型是中立于平台和语言之间的接口，它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。 DOM 分层节点 DOM的分层节点一般被称作是DOM树，树中的所有节点都可以通过脚本语言例如J...
DOM的常见操作
qq_57215961的博客
05-19 1164
DOM( Document Object Model ) 文档对象模型，提供了很多对标签增删改查的操作。 下边分享DOM中常见的增删改查操作： 增 新建元素/节点 创建元素节点 createElement(标签名) 直接设置属性 setAttribute(name,value) 插入节点 ...
09、JavaScript-DOM获取元素及修改属性
执手天涯@的博客
01-13 1077
1、Web Api基本认识 【作用】： 使用JavaScript去操作html和浏览器 【分类】： DOM ：文档对象模型 BOM ：浏览器对象模型 JavaScript结构图： 【什么是DOM】： DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 【DOM树】： 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 DOM对象： 浏览器根据html标签生成的 JS对象。 所有的标签属性都可以在这个
什么是BOM操作，什么又是DOM操作，他们有什么区别，他们分别用来做什么
getture的博客
09-09 898
一.首先要知道什么是BOM操作，什么是DOM操作       1.DOM（Document Object Model）: 文档对象模型 获取过来的DOM元素是一个对象（object），所以称为文档对象模型 是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式（特别理解一下此处的加粗字体） 1.对于JavaScript，为了能够使JavaScr
javascript DOM基本操作
ktutu的博客
12-30 1052
1.获取节点document1.用指定ID选取元素 document.getElementById<div id="div"></div>document.getElementById('div');2.用指定名字选取元素 document.getElementsByName 一些HTML元素拥有name属性（比如、、、、和等），非唯一，所以多个元素可能有相同的名字。基于name属性的值选取HTM
ExtJs 2.0 官方网站中文的入门指南 javascript
qingfengxia2013的专栏
01-08 183
本教程适用于Ext 2.0的版本，而版本1.x仍可找到。建议直接访问http://extjs.com/learn/Tutorials 无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页 面并运行起来，假设读者已具备了一些JavaScript经验和简单了解HTML的文档对象模型（docum...
BOM和DOM详解
热门推荐
anythings的专栏
04-25 2万+
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。 js组成 我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C
DOM的简单介绍和操作
HelloImyHe的博客
08-23 1887
前言 JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。 事件 JS是以事件驱动为核心的一门语言。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值