一、概述
客户端Javascript的存在,是为了使静态的Html页面变成可交互的Web应用。可以脚本化Html页面的内容是JavaScript的核心目的。
二、选择文档元素
1、getElementByID();
每个文档的元素都可以赋一个在文档范围内唯一的id属性。在微软IE8之前的浏览器,该方法还会去匹配name属性,然后返回匹配的元素。
2、getElementsByName();
3、getElementsByTagName();
可以在document和element上调用
4、getElementByClassName();
可以在document和element上调用
5、querySelector(),querySelectorAll()
可以在document和element上调用,
三、文档结构与遍历
1、作为节点树:文档由节点组成,节点之间形成一棵树形的结构。文档对象,元素对象,文本对象都是节点。节点定义了以下重要属性:
parentNode:父节点,如果没有返回null,比如document没有父节点
childNodes:动态的子节点列表
firstChild,lastChild:第一个,最后一个子节点,如果没有返回null
nextSibling,previousSibling:下一个,上一个兄弟节点
nodeType:document=9,element=1,text=3,comments=8,document fragment=11
nodeValue:text或者comment节点的文本内容
nodeName:标签名称,转换成了大写
2、作为元素树:不考虑文档中的文本,抽取所有的元素作为一个树,元素对象的属性有:
children: 子元素列表
firstElementChild,lastElementChild:
nextElementSibling,previousElementSibling
childElementCount
四、属性 Attribute
1、Html 属性作为Element对象的属性
html属性不区分大小写,但是element对象区分,所以html属性转为element属性,属性名要做相应变化。
2、获取,设置,移除,判断是否存在某属性
getAttribute,setAttribute,removeAttribute,hasAttribute
3、html5中的dataset attribute
4、属性作为节点:document.body.attributes.bgcolor, document.body.attributes["onload"]
五、元素内容
1、作为html
innerHTML,outHTML,insertAdjacentHTML();
2、作为纯文本
textContent,innerText属性
3、作为文本节点
nodeValue,data属性
六、创建,插入,删除节点
1、创建
createElement(),createTextNode(),createComment(),createElementNS(),createDocumentFragment()
cloneNode(),importNode()
2、插入
appendChild(),insertBefore()
如果插入的元素,在文档中已经存在,相当于把元素从原来的位置移动到插入的位置。
3、删除和替换节点
removeChild(), replaceChild()
4、使用documentFragment
一个新创建的documentFragment,是一个临时的节点容器,当把一个documentFragment插入到document中的时候,实际上是把documentFragment里的所有子节点当做一个整体插入的。
七、文档和元素的图形化,以及滚动
本节讨论文档元素的渲染,文档元素的位置通过像素坐标确定的。有2个坐标概念:文档坐标,和视图坐标。
两套坐标系相差一个滚动条的位置。不同的浏览器获取滚动条位置的方法不一样。
1、从元素获取位置:getBoundingClientRect(), getClientRects()
2、从位置获取元素:elementFromPoint()
3、滚动页面:window对象的方法:scrollTo(),scroll(),scrollBy(),scrollIntoView()