尚硅谷的js操作dom元素，学习笔记

听尚硅谷的js操纵dom元素做的笔记

第一个视频：

1、dom是什么？

注释：

D：document

O:object

M:model

2、dom树

注释：根节点包含其他的子节点。

3、  示例，对于button绑定script代码

 

 

 

 

 

4、对代码的注释和理解：

5、相同功能不同的写法：

注释：这样写不好的地方是，html和js的代码，耦合起来了。

这样的写法，更加适合，整个html页面中只有一个功能的时候。

6、script放的位置：

注释：将script标签放在了html标签的后面，可以获得文档加载后，其中的节点，但是不符合js的代码习惯，虽然可以获取到。

 

 

 

 

7、windows.onload事件，这个事件是当整个窗口被加载完成后，才会去加载这个代码。

注释：这样加载，所以这个可以获取当前文档的任何节点。

总结，写文档，还是需要放在html里面，但是可以可以将函数放在window.onload()函数里面。

第二个视频

8、两种方式获取，dom元素

 

注释：两种获取当前文档的方式，

第一种：document.getElementById(“bj”);

这样就可以轻松获得，id为北京的节点的信息。

第二种：使用标签名document.getElementsByTagName("li");

是获取整个文档中li的个数，这个个数是8。

9、获取citynode子节点下的li的个数

注释：获取指定节点下的li的元素的个数。这个获取的元素在上一个图中，弹窗中显示的值为4.。因为在citynode这个节点下的，里节点的个数，只有四个。

10、根据元素的属性名获取指定节点的集合

注释：这个方法的使用需要谨慎，这个方法是通过标签中的name="",来获取的，这个是input标签中是支持name属性的。但是如果是li标签的话，就是不支持name属性的，如果强行加入，则ie浏览器，就不可以进行识别，但是其他的浏览器是可以进行识别的。