DOM启蒙——第五章

最新推荐文章于 2020-12-06 11:25:28 发布
最新推荐文章于 2020-12-06 11:25:28 发布
阅读量396 收藏
点赞数
1.CSSOM视图模块中规范了操作元素节点的可视化表象的API。

2.获取元素相对于offsetParent的offsetTop及offsetLeft值
使用offsetTop和offsetLeft属性可以获取元素节点相对于offsetParent的偏移像素量，这些元素节点属性告诉我们某元素上部与左侧边框最外沿到offsetParent上部与左侧边框内侧的距离，以像素为单位。
●offsetParent的值判定依据为查找离该元素最近的CSS定位值 不为static的祖先元素，如果没找到，则body元素为offsetParent值。
●若在查询先祖过程中，找到<td>、<th>或者<table>元素且定位值为static，则它将成为offsetParent的值。
P.appendChild(document.createTextNode(div.offsetParent));//body
P.appendChild(document.createTextNode(div.offsetLeft));//最外侧与body距离  60px
P.appendChild(document.createTextNode(div.offsetTop));//最上边与body距离  60px
●若将父元素div的定位由static改为absolute，则div.offsetLeft与offsetTop将会改变。
●当offsetParent是<body>且<body>或者<html>有可见的边距、填充或者边框值时，从内边框开始丈量。
offsetParent、offsetTop和offsetLeft都是HTMLElement对象上的扩展。

3.getBoundingClientRect()获取元素相对于视区的Top、Right、Bottom及Left边沿偏移量。
使用getBoundingClientRect()方法可以获取元素外边沿的位置。
在元素上调用getBoundingClientRect()方法，将会返回一个对象，包含top、right、bottom、left;
var divEdges=div.getBoundingClientRect()
P.appendChild(document.createTextNode(divEdges.top+" ,"+divEdges.right+" ,"+divEdges.bottom+" ,"+divEdges.left))

这四个值都是元素最外沿到offsetParent的左内或上内框的距离。

4.获取元素在视区中的尺寸(边框+填充+内容)
getBoundingClientRect()方法返回值中还包含了height和width，height和width为元素的尺寸。完整尺寸是根据区块内容以及它的填充和边框相加得到的。
P.appendChild(document.createTextNode("height:"+divEdges.height+"  width:"+divEdges.width))
width和height属性值也可以用offsetWidth、offsetHeight属性获取。
P.appendChild(document.createTextNode("height:"+div.offsetHeight+" Width:"+div.offsetWidth));

5.获取元素在视区中的尺寸(填充+内容 ，不含边框)
clientWidth和clientHeight属性返回元素内容与其填充相加得到的尺寸，不包括边框尺寸。
P.appendChild(document.createTextNode("clientHeight:"+div.clientHeight+"  clientWidth:"+div.clientWidth));

6.使用elementFromPoint()获取视区中某一特定上最顶层的元素
使用elementFromPoint()可以取得HTML文档中某一特定坐标点上最顶层的元素的引用。传入的参数为视区左与上坐标位置
P.appendChild(document.createTextNode(document.elementFromPoint(50,50)));

7.使用scrollHeight和scrollWidth获取滚动元素的尺寸
P.appendChild(document.createTextNode("scrollHeight:"+div.scrollHeight+"  scrollWidth:"+div.scrollWidth));

8.scrollTop和scrollLeft获取并设置从上、左边滚动的距离
scrollTop和scrollLeft都是可读写的，返回可滚动视区中因为滚动而暂时不可见的元素距离左边或者上边的距离。

9.使用scrollIntoView()滚动元素到视区。
选取可滚动节点中某一节点后，我们可以使用scrollIntoView()方法使选取节点滚动到可视区域。
document.querySelector("#flow").scrollIntoView(true);
通过给scrollIntoView()方法传递true为参数，告诉它滚动到被滚动元素的顶部，不传递参数时默认也为true,滚动到底部则应该传入false.

青柠可乐
关注
JavaScript学习笔记(第七章—DOM)
RuanLiyufei的博客
12-08 652
JavaScript学习笔记(第七章—DOM) 1、DOM对象简介 1.1 什么事DOM对象 DOM(Document Object Model 文档对象模型)可以完成HTML和XML文档的操作，在JavaScript中利用DOM操作HTML和CSS样式是最常用的样式之一。DOM对JavaScript是一种可操作HTML文档得重要手段。利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性...
第七章 DOM 编程
myid00451612的博客
01-13 955
第一节：DOM编程概述 1.1 什么是DOM编程 ​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。 1.2 为什么要学习DOM编程 学习DOM操作 就是 操作页面中的节点对象（元素，文本，元素中的属性）。 增删改 新增：新增什么？ 各种标签 本来不存在，但是我们又想用， 无中生有！ 创造标签 此时没有样式 创建 美化（设置样式，添加内容）.
DOM启蒙JPG版
12-27
自制图像版，去除目录等无用页面，给想深入原始API的人看，不被各种框架掩盖实质。
《DOM启蒙》 随笔
weixin_33807284的博客
12-26 96
使用 Javascript 字符串创建并向 DOM 中添加元素与文本节点 innerHTML、outerHTML、textContent 及 insertAdjacentHTML() 属性和方法提供了使用 Javascript 字符串创建并向 DOM 中添加节点的功能。 &lt;!DOCTYPE html&gt; &lt;html lang='en'&gt; &lt;body&gt; ...
DOM启蒙——第一章
Wendelle的博客
04-07 1160
1.文档对象模型 HTML文档被浏览器解析并转换为一个由节点对象组成以体现当前文档的树状结构，DOM的目的是使用JavaScript操作为当前的文档提供一个编程接口。 2.节点对象类型 ●DOCUMENT_NODE (如window.document) ●ELEMENT_NODE如(、、...) ●ATTRIBUTE_NODE(如class="color") ●TEXT_N
DOM启蒙：DocumentFragment节点
里脊的博客
10-30 264
1.DocumentFragment对象概览      把DocumentFragment看做一个空的文档模板，行为与实时DOM树相仿，但仅在内存中存在，并且它的子节点可以很简单地在内存中操作，而后附加到实时DOM。   2. createDocumentFragment()：             创建DocumentFragment             使用文档片段在内存中创建...
DOM启蒙——第二章
Wendelle的博客
04-11 510
1.文档节点 HTMLDocument构造函数在DOM中创建DOCUMENT_NODE(如window.document)。 alert(window.document.constructor);//function HTMLDocument() alert(window.document.nodeType);//DOCUMENT_NODE  9 即HTMLDocument构造函数
程序员的 AI 启蒙课，ChatGPT 辅助开发 Vue3 项目
最新发布
04-18
Vue3是Vue.js框架的第三个主要版本，它在保持Vue2易用性和灵活性的同时，引入了许多新的特性和改进，以提高开发效率和性能。Vue3的一些关键特性包括组合API、响应式系统重构、编译时优化等。 #### 2.2 Vue3新特性...
前端开发核心知识进阶
GitChat
07-02 4284
《白帽子讲Web安全 》 随手记（一）
ai_64的博客
04-04 2015
第一遍阅读这本书是在今年春节，那时读得太匆忙，加上对Web上存在的威胁了解不多，那时并不觉这本书较同类书籍有什么特别之处。 时隔3个月第二次阅读，醍醐灌顶，特别是讲解原理的部分，深入浅出，很好的梳理了各个知识点。 毫无疑问，这本书不久我还会读第三遍，不愧为安全从业必读书籍。 这本书的地位： 这本书在安全界地位非常高。首先这本书出版时间是2012年，时间比较早， ...
分享笔记1 之《白帽子讲web安全》
m0_46583081的博客
12-06 422
分享笔记（一）之《白帽子讲web安全》
Python 系列（10本）
xuanmu
04-26 778
Python 系列（10本） 如果你之前一点编程经验都没有，先看如下两本： 34.《简明 Python 教程》(A Byte of Python) 现在有 Python 3 的版本（Introduction ยท A Byte of Python）了 。最简洁易懂的 Python 书了。本书采用知识共享协议免费分发，意味着任何人都可以免费获取.在线阅读：《简明 Python 教程》;类似的在线学习...
DOM启蒙——第六章
Wendelle的博客
04-21 518
1.文本对象概览 HTML文档中的文本表现为Text()构造函数的实例。即文本节点。 var text=document.querySelector("#txt").firstChild; P.appendChild(document.createTextNode(text.constructor));//Text() Text()构造函数构造文本节点，Text从ChracterD
DOM启蒙——第四章
Wendelle的博客
04-13 553
1.选取特定元素节点 取得一个元素节点引用的最常用的方式为 ●querySelector() ●getElementById() querySelector()返回文档中符合传入选择器的首个元素节点，即若有多个节点满足条件，则返回第一个。 document.createTextNode(document.querySelector("li").textContent) do
DOM启蒙——第三章
Wendelle的博客
04-12 470
1.HTML文档中每个元素都有个独一无二的javascript构造函数使这些元素实例化为DOM树中的节点对象。 (document.createTextNode(document.querySelector("a").constructor));  //function HTMLAnchorElement(){ [native code] } 2.HTML Element对象属性与方法 va
DOM启蒙——第11章
Wendelle的博客
05-22 570
1.DOM事件概览 ●DOM事件是指发生某种与DOM中元素、document对象或window对象有关的时刻或者契机。 ●可以通过HTML内联属性事件处理程序，属性事件处理程序，或者addEventListener()方法布置事件回调。 var div=document.querySelector("#warp"); //属性事件处理程序 div.onclick=function()
DOM启蒙——第十章
Wendelle的博客
05-18 583
1.插入与执行JavaScript ●通过引入外部JavaScript文件或者编写内联JavaScript来添加JavaScript到HTML文档。 ●两种添加JavaScript到HTML文档的方式都需要使用script元素节点，script元素可以包含JavaScript代码或者使用src属性引入外部JavaScript文件链接。 ●在同一个script标签里引入外部JavaScript
DOM启蒙——第九章
Wendelle的博客
05-14 433
1.CSS样式表 ●通过使用HTMLLinkElement节点(如)引入外部样式表，或者使用HTMLStyleElement节点(如)来定义内联样式表。 P.appendChild(document.createTextNode(": "+document.querySelector("style").constructor)); P.appendChild(document.cre
DOM启蒙：节点概览
里脊的博客
10-21 156
1.DOM:由节点对象组成的树 2.节点类型    节点类型：   DOCUMENT_NODE ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE DOCUMENT_FRAGMENT_NODE DOCUMENT_TYPE_NODE     这些节点类型常量在浏览器JavaScript环境中是Node对象的属性。    节点接口/构造函数 HTML*Ele...
jquery的DOM操作——邮件功能
05-27
好的，很高兴为您解答。那么您的问题是什么？ 如果您要实现一个邮件发送功能，可以通过以下步骤来实现： 1. 获取邮件内容：通过 jQuery 的选择器获取邮件内容输入框中的内容。 2. 获取收件人信息：同样利用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值