JavaScript基础之十三(DOM)

Document Object Model(DOM)

window对象下有一个document属性来指向Document对象,这个对象是API集合(DOM)的核心对象。所以常常说的DOM指的就是一堆API的集合,用来呈现和操作document的内容。有一个需要理解并记住的部分:HTML里面的所有元素对应DOM里面的DOM节点树结构。与节点层级相关的重要属性如下:

parentNode,childNodes,firstChild,lastChild,nextSibling, previousSibling,nodeType,nodeValue,nodeName

注意一点,这里所有的对象都包含元素和文本节点,有一个例外就是parentNode(只指向元素节点或null),实际使用中往往只需要获取元素节点。

tips:节点类型

ELEMENT_NODE = 1;//元素节点
ATTRIBUTE_NODE = 2;//属性节点
TEXT_NODE = 3;//文本节点
CDATA_SECTION_NODE = 4;
ENTITY_REFERENCE_NODE = 5;
ENTITY_NODE = 6;
PROCESSING_INSTRUCTION_NODE = 7;
COMMENT_NODE = 8;
DOCUMENT_NODE = 9;
DOCUMENT_TYPE_NODE = 10;
DOCUMENT_FRAGMENT_NODE = 11;
NOTATION_NODE = 12;

 

元素节点树

实际操作时,我们更多关注是元素节点,这里的一些属性是针对元素节点的。

children, firstElementChild, lastElementChild, nextElementSibling, previousElementSibling, childElementCount(children.length)

注:这些方法存在IE兼容性(6,7,8)

 

使用DocumentFragments

该节点是一个临时存放其它节点的容器,它不属于任何节点,parentNode为null。

 

文档坐标和Viewport(视口)坐标

相对于文档的坐标是不变的,变化的是相对于Viewport的坐标。常常会根据Viewport坐标的变化来做一些操作,比如lazyload效果,当然元素进入视口时指向什么操作。为了能够计算视口的坐标,需要知道这些属性:window.pageXOffset(scrollX), window.pageYOffset(scrollY)(表示滚动条水平向和垂直向滚动的距离)

IE需要使用document.documentElement.scrollLeft, document.documentElement.scrollTop

 

tips:因为IE下不识别window的属性,所以通常情况下我们会使用document对象去获取这些值。兼容写法:document.body.scrollTop(chrome),document.documentElement.scrollTop(IE)

 

最简单获取元素的大小和Viewport位置

使用elem.getBoundingClientRect()获取(获取是一份静态的数据,不能修改),如下所示:

bottom:底边到Viewport顶部的距离  height:元素高度(包含border,不包括margin)  left:元素左边到Viewport左边的距离

right:元素右边到Viewport左边的距离  top:元素顶部到Viewport顶部距离  width:元素宽度(包含border,不包含margin)

 

tips:旧版浏览器不支持情况(IE都支持,也是IE最先有的这个方法),需要通过所有元素都具有的几个属性来转换

① offsetWidth(包含border,padding), offsetHeight(包含border,padding);

② offsetTop, offsetLeft:这个两个属性指的是元素到最近的定位父级(relative,absolute)的距离,一般情况下这个父级就是body;

③ clientWidth和scrollWidth区别(同clientHeight,scrollHeight)

④ clientLeft、clientTop:不常用,通常就是元素border的大小,如果是inline元素,始终为0

⑤ scrollLeft、scrollTop:通常是针对document来获取,对于有滚动条出现的元素也可以获取滚动距离

 

获取指定坐标下的元素(相对于viewport)

document.elementFromPoint(x,y):返回一个当前位置元素(不包含父级元素)

document.elementsFromPoint(x,y):返回元素集合(包含父级,父级的父级,一直到html)

Form表单元素

Form用来提交用户输入的数据到服务器端进行处理,在web开发里面具有重要的作用。所有的form表单元素(input)都有如下属性:

type:表单元素类型(text,password,.etc)

form:只读属性表示该元素是否被包含的form元素,为null表示没有被包含在form标签中

name:具体指定那个表单元素

value:表单元素的值

Form表单事件:onsubmit(表单通过submit按钮提交时触发,注意通过from.submit()方法提交不会触发该事件);onreset(通过reset按钮触发,调用form.reset()不会触发)。一般情况下,button按钮触发onclick事件,其它元素触发onchange事件(即便没有使用鼠标而是使用键盘)。radiobutton和checkbox会触发click和change事件,通常监听change事件就ok了。

 

Document其它属性

cookie:允许javascript读写http cookie

domain:手动设置信任的web服务器(放宽同源策略)

lastModified:包含文档的修改日期

location:指向Location对象

referrer:来路地址

title:当前页面title元素内容

URL:只读当前页面的URL

 

document.write()方法

这个方法向当前文档写入内容,位置就是document.write方法所在的位置。但是如果是在某个方法里面调用document.write,这时覆盖之前文档的内容。由于这个原因,不能在带有async和defer属性的script标签的js里面使用该方法。如果使用了,在chrome会有警告:

Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

 

获取页面中选中的文本

最新浏览器(IE9+):window.getSelection().toString()

IE6,7,8使用document.selection.createRange().text

上面的方法如果要获取text和textarea里面的选中的文本:elem.value.substring(elem.selectionStart, elem.selectionEnd);

 

可编辑的富文本框(contenteditable,designMode)

H5里面提供了一些没有被全部支持的接口方法让我们自己来制作富文本编辑器(类似网上很多开源的富文本编辑插件)

 

定位(position)

定位分为四种:static,absolute,fixed,relative

默认情况下元素都是static的,不能设置top和left。当我们给一个元素添加了一个position:absolute,relative,fixed。我们称这个元素是被定位的。

注:absolute和fixed定位的元素会脱离当前的文档流(不占据位置),前者相对于最近的一个定位元素进行偏移,后者相对这个浏览器窗口进行偏移

relative相对元素之前的位置进行偏移,不会影响其它元素的位置,而且也不会脱离当前的文档流。

 

获取当前的脚本和样式

当然可以使用document.getElementById等方法,这里可以使用document.styleSheets,document.scripts

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/910
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注