百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

简析JS中Document与CSS js中的document

myzbx 2024-12-18 15:45 30 浏览

如果你是一名前端人员,你单单的使用jq插件显然不够,js在大多时候比较搁置,但你如果前端技术想要提升,那么js的精通对你显得很重要,本文只是他到js的document与css。

1.Document与Element和TEXT是Node的子类。

Document:树形的根部节点

Element:HTML元素的节点

TEXT:文本节点

>>HtmlElement与HtmlDocument

a:HtmlElement对象表示HTML中的一个个元素。

b:HtmlDocument对象表示 HTML 文档树的根。HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法。

>>HTML的DOM对象

a:DOM Event:Event 对象代表事件的状态。

b:DOM Attribute:Attr 对象表示 HTML 属性。

c:DOM Element:Element 对象表示 HTML 元素,Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

d:DOM Document:每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

#log span 与 #log>span的区别?

<div id="log">
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
<div>
<span>Span4</span>
<span>Span5</span>
</div>
</div>

#log span的效果:

#log>span的效果:

2.CSS选择器

与CSS选择器的标准化一起的另外一个称做"选择器API"的W3C标准定义了获取匹配一个给定选择器的元素的JavaScript方法。该API的关键是Document方法querySelectorAll()。它接收包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList对象。

querySelectorAll()返回的NodeList对象并不是实时的:它包含在调用时刻选择器所匹配的元素,不包括后续的通过JavaScript更改文档的匹配元素。

querySelectorAll()强大到即使在没有其的原生支持的浏览器中依旧可以使用CSS选择器。它是一种终极的选取方法技术。

基于jQuery的Web应用程序使用一个轻便的,跨浏览器的和querySelectorAll()等效的方法,命名为$().

jQuery的CSS选择器匹配代码已经作为一个独立的标准库提出来并发布了,命名为Sizzle。

3.HTML属性作为Element的属性

表示HTML文档元素的HTMLElement对象定义了读写属性,他们映射了元素的HTML属性。

例如:

var image=document.getElementById("my_image");

var imgurl=image.src;

可以使用<img>元素的HTMLElement对象的src属性.

4.数据集属性

有时候在HTML元素上绑定一些额外的信息。HTML5提供看一种方法。

任意一”data-*“为前缀的小写的属性名字都是合法的。

5.Web浏览器很擅长解析HTML,通常设置innerHTML效率非常高。但是:对innerHTML属性使用”+=“操作符重复追加文本时效率低下,因为它既要序列化又要解析。

插入节点方法:appendChild()与insertBefore()的异同?

6.视口坐标与文档坐标

视口坐标:指的是显式文档内容的那一部分(也即我们在浏览器中能看到的那部分区域),不包括浏览器的外壳元素,比如菜单栏,工具条等。

文档坐标:指的是包含整个页面的整个部分(也即我们在浏览器中能看的那部分区域以及需要依靠滚动条来滚动查看的区域)。

该书中提供了几个实用的方法:

a:查询窗口滚动条的位置

//查询窗口滚动条的位置

functon getScrollOffsets(w){

w = w || window;

var sLeft,sTop;

if(w.pageXOffset != null) {

sLeft = w.pageXOffset;

sTop = w.pageYOffset;

return {x:sLeft,y:sTop};

}

b:查询窗口的视口尺寸

//查询窗口的视口尺寸

function getViewportSize(w){

w = w || window;

var cWidth,cHeight;

if(w.innerWidth != null){

cWidth = w.innerWidht;

cHeight = w.innerHeight;

return {w:cWidth,h:w.cHeight};

}

if(document.compatMode == "CSS1Compat"){

cWidth = document.documentElement.clientWidth;

cHeight = doument.documentElement.clientHeight;

return {w:cWidth,h:w.cHeight};

}else if(document.compatMode == "BackCompat"){

cWidth = document.body.clientWidth;

cHeight = doument.body.clientHeight;

return {w:cWidth,h:w.cHeight};

}

}

7.查询元素的几何尺寸

getBoundingClientRect()方法

具体见乱炖中的这篇文章:使用getBoundingClientRect()来获取页面元素的位置

需要注意的是:getBoundingClientRect这个方法不同于getElementByTagName()这样的DOM方法返回的结果是实时的,但是getBoundingClientRect却不是,它类似于一种静态快照。用户滚动的时候,并不会去实时更新。

getBoundingClientRect()与getClientRects()的区别?

8.判断元素在某点

elementFromPoint()能够用来判断判定视口中的指定位置上有什么元素。

传递X与Y坐标(使用视口或窗口坐标而不是文档坐标)

它有一个取代者,那就是target属性。

9.滚动

Window的scrollBy()与scroll()和scrollTo()类似。

只是scrollBy的参数是相对的,并在当前滚动条的偏移量上增加。

如:

scrollIntoView()的使用?

offsetWidth()

offsetHeight()

offsetLeft()

offsetTop()

offsetParent()

clientWidth()

clientHeight()

clientLeft()

clientTop()

scrollWidth()

scrollHeight()

scrollLeft()

scrollTop()

Client他就是Web浏览器客户端-专指它定义的窗口或视口。

10.HTML表单

服务器端程序是基于表单提交动作的

客户端程序是基于事件的

JavaScript的From。

切图网(qietu.com)是一家专门从事web前端开发的公司,专注we前端开发,关注用户体验,欢迎订阅微信公众号:qietuwang

相关推荐

砌体植筋拉拔试验检验值到底是6.0KN,还是10.2KN,如何计算确定

砌体拉结筋植筋养护完成后,需对所植钢筋进行拉拔试验,以检验植筋的锚固强度是否满足设计要求。检测时,按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013,以同品种、同...

柴油机功率如何计算?计算柴油机功率需要哪些参数?

在汽车领域,对于柴油机功率的计算是一项重要的工作,它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先,我们要了解计算柴油机功率常用的公式。在...

变压器短路阻抗的作用和计算方法(变压器短路阻抗的作用和计算方法是什么)

变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据,它是二次侧短接并流过额定电流时,一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢?其实变压器的阻抗电压乃是...

9.35m层高高支模支撑架计算书(支模架多高属于高支模)

某工厂新扩建的建筑面积为1989.2m^2,建筑物总体分为2层,但局部为4层。建筑物檐高19.4m,建筑物总高23m。建筑物呈长方形设置,长度为48.20m,宽度为23.88m,结构形式为框架结构...

吊篮(悬挂装置前梁加长)安全复核计算书

吊篮(悬挂装置前梁加长)安全复核计算书一种超常规搭设的高处作业吊篮,因使用要求将吊篮悬挂装置前梁加长设置,本计算书针对这种工况的校核,以作参考。计算依据:1、《高处作业吊篮》GB/T19155-...

电功率计算公式精编汇总(电功率计算视频讲解)

一、电功率计算公式:1在纯直流电路中:P=UIP=I2RP=U2/R式中:P---电功率(W),U---电压(V),I----电流(A),R---电阻(Ω)。2在单相交流电路中:P=UIcosφ...

灌注桩承载力检测方法及步骤(灌注桩承载力不够怎么办)

检测灌注桩的承载力是确保基础工程安全可靠的关键环节,检测结果的精细能准确为我们提供可靠的数据,让我们能准确判断桩基础的承载力,方便后续施工安排,同样也能让我们根据数据分辨出有问题桩基,采取可靠有效的措...

很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法

高中数学必看:向量叉乘,体积的神。大家都知道a、b的向量是什么意思,但是a、b的向量又是什么?很多同学都不知道,向量的向量在高中阶段非常有用,虽然它是大学的知识,在高中阶段可以干两件事。·第一件事,表...

施工升降机基础(设置在地库顶板回顶)计算书

施工升降机基础(设置在地库顶板回顶)计算书计算依据:1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...

剪力墙水平钢筋根数如何计算?(剪力墙水平钢筋绑扎搭接规范)

剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素,具体步骤如下及依据:1.基本计算公式水平钢筋根数计算公式为:根数=(墙高-起步距离)/间距(墙高-起步距离)/间距...

直流电路常用计算公式(直流电路常用计算公式有哪些)

1、电阻导体阻碍电流通过的能力叫做电阻,用字母R表示,单位欧(Ω)。R=ρl/s式中R-导体的电阻,欧(Ω);ρ-导体的电阻率,欧·米(Ω·m);l-导体的长度,米(m);s-导体的截面积,平方米(m...

电气主电路图的绘制特点(电气原理图主电路)

1、电气主电路图中的电气设备、元件,如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制,而母线则水平绘制。电气主电路图除特殊情况外,几乎无一例外地画成单线图,并以母线为核心将各个项目(如...

中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)

中考物理专题:功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度,需满足两要素:作用在物体上的力、物体沿力方向移动距离。例如推箱子时,若箱子未移动,推力不做功;若箱子滑动,推力做...

40亿QQ号,不超过1G内存,如何去重?

分享一道网上很火的面试题:40亿QQ号,不超过1G的内存,如何去重?这是一个非常经典的海量数据去重问题,并且做了内存限制,最多只能1GB,本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...

填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!

今天分享下植筋间距及保护层要求:根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm,植筋为两根及以上时水平间距为不应小于5d(d为钢筋直径)。根据混凝土结构后锚固技...