1 HTML DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML文档的嵌套元素在DOM以树状对象表示。
HTML文档的树状结构包含表示HTML标签或元素和表示文本字符串的节点，也可能包含表示HTML注释的节点。
1 DOM操作HTML
js能够改变页面中的所有HTML元素
js能够改变页面中所有HTML属性
js能够改变页面中所有的CSS样式
js能够对页面中所有事件作出反应
1.改变HTML输出流
注意，绝对不要在文档加载完成后使用document.write()会覆盖该文档
2.寻找元素
通过id找到HTML元素
var secction1=document.getElementById("section1")
通过标签名找到HTML元素
获得包含所有<span>元素的只读的类数组对象，返回一个nodeList对象
var spans=document.getElemenstByTagName("span")
在NodeList中返回的元素按照文档中的顺序排序，返回第一个元素则用
var firstpara=document.getElemenstByTagName("p")[0]
传递"*"元素将获得一个代表文档中所有元素的NodeList对象
通过类选取元素
和标签名方式差不多
var warnings=docuement.getElementsByClassName("warning")
3.使用属性：innerHTML
可以获取全部HTML元素
也可以用来改变HTML元素
4.改变HTML属性
HTML元素有一个标签和一组称为属性的名/值组成，例如<a>元素定义了一个超链接，有href属性。
对于通用属性，直接使用即可，例如查询一张图片的URL
var image=document.getElementById("myimage");
var imgurl=image.src
对于非标准的HTML属性，定义了getAttribute()和setAttribute()方法来查询和设置非标准的HTML属性
var width=parseInt(image.getAttribute("width")）
image.setAttribute("class","thumbnail);
属性值都被看做字符串，getAttribute()不返回数值，布尔值或对象
element类型还定义了两个相关的方法，hasAttribute()和removeAttribute()，它们用来检测命名属性是否存在和完全删除属性，比如disabled属性
5.Attr节点属性
Node类型定义了attribute属性，针对非Element对象的任何节点，只读
document.body.arrtribute[0] //<body>元素第一个属性
document.body.attribute.backgroundcolor //<body>元素backgroundcolor
document.body.attribute["ONLOAD"] //<body>元素onload属性
2.DOM操作CSS
通过DOM对象改变CSS值
document.getElementById(id).style.property=new style
3.DOM EventListener
1.addEventListener()
接收三个参数第一个是要注册处理程序的事件类型，第二个时指定类型的事件发生时应该调用的函数，最后是布尔值，通常为false
2.removeEventListener()
同样有三个参数，常用于临时注册事件的处理程序函数，不久后删除它。
网友评论