dom进阶知识详解

最新推荐文章于 2024-07-22 16:02:58 发布
最新推荐文章于 2024-07-22 16:02:58 发布
阅读量597 收藏 1
点赞数 2
分类专栏： javascript 文章标签： dom dom操作 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41555854/article/details/115357056
版权

故心故心故心故心小故冲啊

文章目录

一.JS的组成

ECMAScript : 规范，规定了js的基本语法和功能

DOM ： document object model 文档对象模型，浏览器提供的一套操作元素的API

BOM ： browser object model 浏览器对象模型，浏览器提供的一套操作浏览器功能的API

API

API ： application programing interface 应用程序编程接口

—— 别人已经写好的一套代码，多以对象的形式存在，我们要学习这些对象的属性的方法，结合自己的思路，完成效果

WebAPI : 浏览器里面专有的API ，就是DOM+BOM

DOM

document —— 整个页面，把整个页面看成一个对象，使用对象把页面里面的所有东西管理起来

二.事件

事件:

  1. 事件通常是浏览器里面的交互瞬间，比如我们点下的瞬间
  2. 也就是说事件的功能之一是处理浏览器和用户的交互
  3. 注册事件:要使用事件处理交互，需要先注册事件
事件源.on事件类型 = 事件处理程序
翻译过来可以看成
元素对象.on操作 = function(){}
事件源、事件类型、事件处理程序，并称为   事件三要素

onclick        单击         ondblclick     双击
onmouseover    鼠标移入     onmouseout      鼠标移出
onmouseenter   鼠标移入     onmouseleave    鼠标移出
onfocus        聚焦         onblur          失焦
onmousedown    鼠标按下     onmouseup      鼠标松开
onmousemove    鼠标移动

1.注册事件,解绑事件

移除事件的三种方式小结如下：

  1. onclick：让按钮的事件处理函数只能执行一次，οnclick=null ；
  2. removeEventListener：如果想要移除事件，注册事件的时候就不能使用匿名函数；
  3. detachEvent：谷歌中不支持，IE9-IE11中支…持，了解即可；
// 注册事件方式 1
	元素.on事件类型 = function(){}
// 解绑
	解绑元素.on事件类型 = null;
// 注册事件 2
	元素.addEventList('事件类型' , 回调函数 , 布尔值)   // 不兼容 IE
// 解绑
	解绑元素.removeEventListener('事件类型' , 函数)   //  注意:这个函数必须和注册事件的函数是同一个
// 注册事件 3
	元素.attachEvent('on事件类型' , 回调函数)       //  只兼容 IE
// 解绑
	元素.detachEvent('on事件类型' , 回调函数)      //  注意:  这个函数必须和注册的函数是同一个

// 如果需要同时兼容 Chrome 和 IE 就需要做一个判断
// 判断的标准是: window.addEventListener
if(window.addEventListener){
    // 此时是 Chrome
    元素.addEventListener('事件类型' , 回调函数 , 布尔值)
}else {
    // 此时是  IE
    元素.attachEvent('事件类型' , 回调函数)
}


// 回调函数(callback) : 就是一个匿名函数  作用: 当监听事件发生时.触发执行函数

2. 事件的三个阶段

// e.eventPhase  
1----捕获阶段
2----目标阶段 (执行当前点击的元素)
3----冒泡阶段
// addEventListener 第三个参数是布尔值,当为true时,可以模拟事件捕获,当为false时,代表冒泡,默认是false

3. 解决冒泡

事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

// 使用事件对象来阻止冒泡
btn.onclick = function(e){
    e.stopPropagation();   //  e---event的简写   指事件对象  不兼容IE 
}
btn.onclick = function(e){
    widow.event.cancelBubble = true ;     //  IE 解决冒泡
}

// 鼠标移入  onmouseenter 自带解决冒泡

3.事件对象

// js里面提供了一个包含当前事件信息的对象 —— 事件对象
// 获取事件对象只要给事件处理函数添加一个形参就可以了
element.onclickc = function(e){ 
    e 就是事件对象
}
element.addEventListener('click',function(e){ 
    e 也是事件对象
})
// 事件对象的属性和方法
event.type
event.pageX/pageY   // 鼠标移动的横,纵坐标
event.clientX/clientY
event.target    // 可以获取到点击的的实际对象
event.stopPropagation()    //  解决冒泡 
event.preventDefault()

4.事件委托

// 在页面中可以随时操作这些新增的 dom  节点
// 页面没有 li 把点击 li 这件事情委托为父级
e.target        //  可以获取到点击的实际对象
e.currentTarget  // 可以当前真正被点击的对象
当只有一层盒子时, e.currentTage === e.target;
当盒子嵌套时,如果进行了事件委托,那么 e.currentTarget  >  e.target

三.获取元素

//  通过 id 获取元素
		document.getElementById('id名');
//  通过 标签名 获取元素
		document.getElementsByTagName('标签名'); // 无论页面上满足条件的元素有多少个，都是返回伪数组，必须把里面的元素使用索引取出来才能操作
//  通过 类名 获取 元素
		document.getElementsByClassName('类名'); // 无论页面上满足条件的元素有多少个，都是返回伪数组，必须把里面的元素使用索引取出来才能操作
//  通过 name 名获取元素
		document.getElementsByName('name名');   // 无论页面上满足条件的元素有多少个，都是返回伪数组，必须把里面的元素使用索引取出来才能操作
//  通过 querySelector  获取元素
		document.querySelector('#id名')      //   获取id名
		document.querySelector('.类名')      //   获取 同类名 的第一个元素
		document.querySelector('标签名')     //   获取  同标签名 的一个元素
		document.querySelector('选择器')     //   通过选择器获取元素
		document.querySelectorAll('.类名')   //   获取 全部的类名   伪数组的方式
  //  注意点: 这个后面一定是选择器  选择器 选择器

四. 修改样式

//  修改 标签 身上的属性
		元素.属性名 = '新的值';
//  修改 标签 的 css 行内样式
		元素.style.属性名 = '新的值';
// 修改 标签 里面的 文本内容
		元素.innerText = '新的值';
		元素.innerHTML = '新的值';
//  通过 类名 对样式进行控制
		元素.className = '新的类名';

		元素.classList.add('类名','类名')       // 添加类名
		元素.classList.remove('类名', '类名')   // 删除类名
		元素.classList.toggle('类名')           //  切换类名

  1. innerText 和 innerHTML 的区别

    1. 读取的时候
      1. innerText只能读取到文本的内
      2. innerHTML可以获取到html标签和文本内容
    2. 写入的时候
      1. innerText无法将标签尽心编译,只能以文本的形式呈现标签
      2. innerHTML可以解析 html 标签,让浏览器可以识别

  2. JS里面创建元素的方式

    // 1. innerHTML
	元素.innerHTML = 'html'格式的字符串   //  会覆盖之前的内容,实现效率低
//  2. document.createElement
    用法:
		var element = document.createElement('tagname')
        	element   是一个元素对象
            tagname   是一个标签名
   	创建之后,不会自己出现在页面里面,需要我们手动添加内容,属性都是空的,需要自己定义
appendChild  用法:
		父元素.appendChild(子元素)            //  是把元素 a 作为 元素b 的子元素 ,在最后
insertBefore 
		父元素.insertBefore(新元素 , 旧元素)   //  把一个元素插入到另一个元素的前面
removeChild 
		父元素.removeChild(子元素)            //  移除子元素

五.开关属性

标准属性里面有一类属性比较特殊

  1. checked 是否被选中------------单选框,多选框
  2. selected 是否被选中-------------下拉框
  3. disabled 是否禁用

它们只会有两个结果,都使用 Boolean 表示

​ 可以通过 true 或者 false 操作开关属性

//  操作开关属性
元素.checked = true;   //  禁用文本框

//  阻止 a 标签的默认事件
a元素.onclick = function(){
    return false ;   //  阻断所有的代码
}

六.自定义属性

1.JS的自定义属性

// 设置自定义属性
	元素.setAttribute('key(变量)' , 'value(值)');
// 获取自定义属性
	元素.getAttribute('key');
// 删除自定义属性
	元素.removeAttribute('key');

2. H5 的自定义属性

//  一种在标签里面
data-属性名='值';   // 设置
dataset.属性名;     // 获取
// 在JS里面
dataset.属性名.'值';
dataset.属性;        //  获取

七.节点

节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node

// 获取父节点
	子元素.parentNode
// 获取父元素
	子元素.parentElement
// 获取子节点
	父元素.childNodes
// 获取子元素
	父元素.children
// 获取第一个子节点
	父元素.firstchild
// 获取第一个子元素
	父元素.firstElementchild
// 获取最后一个子节点
	父元素.lastchild
// 获取最后一个子元素
	父元素.lastElementchild
// 获取上一个兄弟节点
	元素.previousSibling
// 获取上一个兄弟元素
	元素.previousElementSibling
// 获取下一个兄弟节点
	元素.nextSibling
// 获取下一个兄弟元素
	元素.nextElementSibling

节点校验

节点属性: (可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.点出来)

  1. 节点的类型 : . nodeType

    1. 标签节点 : 1
    2. 属性节点: 2
    3. 文本节点: 3

  2. 节点的名字 : . nodeName

    1. 标签节点 : 大写的标签名字
    2. 属性节点: 小写的属性名字
    3. 文本节点: #text

  3. 节点的值 : . nodeValue

    1. 标签节点 : null
    2. 属性节点 : 属性值
    3. 文本节点 : 文本内容

八.定时器

// 单次定时器
	setTimeout(回调函数 , 毫秒,传入的参数);
//  清除单次定时器
	clearTimeout(定时器的名称);

// 循环定时器
	setInterval(回调函数 , 毫秒);
// 清除单次定时器
	clearInterval(定时器名称);

// 注意点 : 循环定时器需要手动清除,要么给判断条件清除
// 在点击事件里面,一定记得在最开始的位置清除定时器,不然点击次数越多,速度会越来越快

九.跳转页面

// 第一个方式
	<a href = "http://baidu.com">
// 第二种方式
    window.location.href = 'http://baidu.com'
// 第三种方式
	window.history.go()   // 正数代表往前跳转一个页面   负数代表往后跳转一个页面
	window.history.forward()    // 往前跳转一个页面
	window.history.back()       // 往后跳转一个页面
//  必须在同一个文件夹

十.三大家族

// 第一个 : offset  位移.偏移
	元素.offsetLeft    // 到父级元素左侧的距离    (很重要)
    元素.offsetTop     // 到父级元素顶部的距离    (很重要)
    元素.offsetWidth   // 获取元素的实际高度    (实际高度 = 内容+内边距+边框)
	元素.offsetHeight  // 获取元素的实际宽度
// 第二个 : client 客户
	元素.clientWidth    //  获取元素的内容宽度    (内容宽度 = 边框以内的东西   内边距+内容)
	元素.clientHeight   //  获取元素的内容高度
	元素.clientLeft     //  元素左边边框的大小
	元素.clientTop      // 元素顶部边框的大小
// 第三个 : scroll  滚动
	元素.scrollTop      // 获取元素垂直滚动超出的的距离   (很重要)
	元素.scrollLeft     // 获取元素水平滚动超出的距离 
	元素.scrollWidth    //  可滚动的宽度  == 盒子的实际宽度
	元素.scrollHeight   // 可滚动的高度  ==  盒子的实际高度

十一.拖拽

  1. 拖拽的本质就是 鼠标按下去加 移动
  2. 注意点:
    1. 拖拽的元素需要定位,鼠标按下先获取到 鼠标到盒子的宽高 = e.pageX - 元素.offsetLeft
    2. 在鼠标按下里面添加鼠标移动事件, 获取拖拽盒子到文本的距离.
    3. 元素margin一定要清零
    4. 鼠标移开清除移动事件
    5. 一定要定位才会有top和left值

模态框:大盒子里面还有内容.可以再创建一个盒子跟父元素宽高一样,然后内容跟这个做兄弟元素

故心v
关注
专栏目录
DOM进阶
xieixnxia的博客
07-06 129
HTML属性操作（对象属性） 获取静态HTML中的属性值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById("btn");
【JavaScript】DOM进阶
海棠不惜胭脂色，独立蒙蒙细雨中
12-01 848
DOM进阶 一、DOM是什么？     DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。     通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项
JS进阶之DOM
EwanRenton
07-26 158
layout: post title: "JS进阶之DOM" date: 2016-05-31 13:28:27 +0800 comments: true categories: [JavaScript] 这段时间开始实习，拿到手一个项目。都没什么时间写博客了，在写这个项目的实际过程中，发现对JS还是很陌生了。所以决定在空余时间提升下JS。在过了一遍基本的之后看到DOM的时候发现这个东西不太好...
JavaScript进阶内容——DOM详解
JavaMonsterr的博客
07-21 413
当我们已经熟练掌握JavaScript的语法之后，我们就该进入更深层次的学习了首先我们思考一下JavaScript是用来做什么的？JavaScript诞生就是为了能够让它在浏览器中运行那么DOM就是我们学习中不可或缺的一个环节，下面让我们深入了解DOM文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口用来修改网页内容，结构和样式我们用一个图片来表示（来自B站黑马程序员Pink老师）给元素添加事件，被称为注册事件或者绑定事件传统注册方法。...
高级java工程师面试考纲，java高级工程师进阶知识地图
11-01
### 高级Java工程师面试考纲详解 #### Java基础 1. **Collection和Map** - **继承体系**：理解`Collection`接口与其子接口如`List`、`Set`的关系，以及`Map`接口的不同实现类之间的联系。 - **具体实现**：深入...
高级java笔试题-FE_ROAD:现代前端基础知识点学习、进阶
06-03
翻译过来的内容，对ES6各个知识点进行了详解，英文原版在这里 Promise是JS中非常重要的编程思想 内容有些老了，依然是经典 Ecmascript DOM BOM 基础 js 开发者书单，英文的 Dan Abramov的个人博客，对React基础的...
前端必修技能：高手进阶核心知识分享 - CSS 选择器
最新发布
uu0216的博客
07-22 944
CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。CSS 选择器用于选择你想要的元素的样式的模式。看了上面的图，你发现就算你不知道选择器名字叫什么，属于哪一种，但不知不觉的，你其实已经习惯了其中的很多种选择器的使用。嘿嘿，这就是我现在的状态。看了这图之后，你是不是有一种感慨呢？选择器太多了，到底该怎么用呢？
JavaScript DOM进阶方法
10-24
主要介绍了JavaScript DOM进阶,需要的朋友可以参考下
我的Android进阶之旅------>Android中解析XML 技术详解---->SAX解析、DOM解析、PULL解析
字节卷动
03-29 2669
XML在各种开发中都广泛应用，Android也不例外。作为承载数据的一个重要角色，如何读写XML成为Android开发中一项重要的技能。今天就由我向大家介绍一下在Android平台下几种常见的XML解析和创建的方法。 在Android中，常见的XML解析器分别为SAX解析器、DOM解析器和PULL解析器，下面，我将一一向大家详细介绍。 SAX解析器： SAX(Simple API for X
07dom进阶
qq_46055080的博客
04-18 207
07dom进阶 文章目录07`dom`进阶（1）获取不用获取，可以直接使用的：获取方式详解`childNodes``children``previousElementSibling``nextElementSibling``previousSibling``nextSibling``parentNode``parentElement`（2）展开`nodeType ``nodeName``dir`（...
dom进阶操作
imoo的笔记
11-30 237
1.查询dom元素document.querySelector与document.querySelectorAll document.querySelector('.element') document.querySelector('#element') document.querySelector('div') document.querySelector('[name="username"...
数组方法之includes(写出我的myIncludes)
iygxv
03-30 1592
数组方法之includes(写出我的myIncludes) 首先,includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。 先来简单的使用一下include()方法 var arr = [10,20,30,40,50]; arr.includes(10); //true 当传入俩个参数的参数 var arr = [10,20,30,40,50]; arr.includes(10,1); //false 竟然变成false了 那么先介绍一下对于include
javascript高级程序设计(红宝书)记录
iygxv
02-02 739
故心故心故心故心小故冲啊 文章目录第3章.语法基础第4章.变量作用域与内存第5章.基本引用类型第24章.网络请求与远程资源第25章.客户端存储 第3章.语法基础 undefined 值是由 null 值派生而来的，因此 ECMA-262 将它们定义为表面上相等，如下面的例子所示： console.log(null == undefined); // true console.log(undefined === null); //false 用等于操作符（==）比较 null 和 undefined
js数据类型总结以及typeof详情
iygxv
10-22 426
js数据类型总结 数据类型:基本类型和引用类型 文章目录js数据类型总结一、基本类型二、引用类型总结 一、基本类型 基本类型: number string undefined null boolean 属于栈类型 存值 typeof(1) === "number" typeof('1')=== "string" typeof(a) === "undefined" typeof(null) ==="object" typeof(true) === "boolean" /* *typeof 返回的数据类
this指向，认识与理解this指向
iygxv
10-23 390
this指向 this指向 -------简单的理解谁调用它就指向谁 文章目录this指向下面从几方面来理解this1、简单函数2、内置函数3、回调函数4、数组5、对象6改变对象指向(call apply bind)总结 下面从几方面来理解this 1、简单函数 //简单函数 /this ===window function f(){ console.log(this); //window } 2、内置函数 //内置函数 this ===wi
对象的深层次获取
iygxv
03-08 370
故心故心故心故心小故冲啊 文章目录 在写代码的时候遇到一个问题，在访问一个对象嵌套对象在嵌套对象，例如 var obj = { a：{ c:123 } } 获取c的值 obj.a.c //123 那么如果只能通过obj[ ] 的方式应该如何去获取呢？ 这样获取吗？ obj['a.c'] //错误 那么如何实现obj[ ] 这样的方式获取呢？ 可以从上面可以知道obj.a.c 是可以获取到值的，那么我们就可以通过一个lookup函数来变成这样 /* *obj
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值