发表于： 2017-04-03 21:09:16
1 1393
常见的DOM操作有哪些？
一.背景介绍
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
二.知识剖析
什么是DOM？
文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。
三.常见问题
常用的DOM操作有哪些？
四.解决方案
常用的DOM操作包括获取属性修改属性和获取节点并修改节点内容。
五.代码实战
var num = document.getElementsByTagName("div");
alert(num[1].getAttribute("title"));
num[1].setAttribute("title","我现在是二娃");
alert(num[1].getAttribute("title"));
num[1].setAttribute("title","我现在是二娃");
body[0].style.width = "900px";
六.拓展思考
setAttribute和.value都可以改变元素的值，他们有什么区别？
如果对象有默认值，则attribute将始终返回默认值，而property则会实时更新。如果设置了一个默认的value值，则getAttribute将始终返回这个默认值，el.value则会随着用户的输入而更新。但是，herf属性的值也不是完全一样，即以一个完整的网址出现时是一样的，简写网址的话是不一样的。
七.参考文献
http://www.cnblogs.com/yinshuige/p/5812095.html GraceZy's blog
八.更多讨论
document和element有什么区别?
本次小课堂主要是操作，文字部分比较少，有兴趣可以去看视频。
PPT地址：https://ptteng.github.io/PPT/PPT/JS-02-commonDOM.html#/
视频地址：https://v.qq.com/x/page/s0390iq1qj6.html
返回列表
评论