你可以看到
要说的话
到这里总算不是门外汉了,这才是程序员的开始。
–资料来源于饥人谷
DOM编程
JS用document操作网页,这就是Document Object Model文档对象模型。
什么是DOM呢,就是把网页抽象成一个document对象,并对它进行操作的一种方式就是DOM
- 网页其实是一棵树
看一下代码结构
看树每个节点
JS 如何操作这棵树
浏览器往window上加一个document即可
- JS 用document 操作网页
这就是Document Object Mod,DOM
- DOM很难用
API很长,不好用,不得不来封装
d
获取元素,也叫做标签
获取任意元素的API
1. window.idxxx或者直接idxxx
2. document.getElementByld(‘idxxx’)如果id和全局变量冲突了可以用这个
3. document.getElementsByTagName(‘div’)[0]找到所有标签名为div的元素,只有加下标才可以来操作对应div。
比如
4. document.getElementsByClassName(‘red’)[0]根据class类名来获取,比如把所以类名class为red的标签用下标获取到,取第0个下标即第1个元素。
5. document.querySelector('#idxxx')
可以像css选择器一样写的很复杂,比如某个div里的span并且还是div的第二个儿子
document.querySelectorAll('.red')[0]
找到所有满足这个条件的元素
- 用哪一个
工作中用querySelector
和querySelectorAll
,要兼容IE的才用getElement(s)ByXXX
获取特定元素
- 获取html根元素
document.documentElement 好长啊
如果你打出它的标签名的话:document.documentElement.tagName获取html元素的标签名
你会发现本来是小写的标签html,用DOM打印出来就变成了大写HTML。。
- 获取head元素
document.head
- 获取body元素
document.body
- 获取窗口(窗口不是元素)
window
window虽然不是一个标签,但我们有时确实会获取到这个window,然后可以添加一些事件监听
- 获取所有元素
document.all
可以看到当前页面一共有多少个标签。
IE写的,可以用来判断浏览