了解DOM编程

---

你可以看到

如何获取元素

节点的增删改查

DOM跨线程操作

要说的话

到这里总算不是门外汉了，这才是程序员的开始。

–资料来源于饥人谷

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写的，可以用来判