简析JS中Document与CSS

如果你是一名前端人员，你单单的使用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与Ｙ坐标（使用视口或窗口坐标而不是文档坐标）

它有一个取代者，那就是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