js笔记(暑假11)

例8：利用按钮实现移动距离的增大，一直点，移动距离越来越大



   
   


                                             /*创建按钮的格式，大小颜色什么的*/
加速

例9：4 * 4 的的区域，或者方格，鼠标经过实现颜色的改变，每经过一次，颜色改变一点。



   
   
   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

补充CSS插件：
div.demo#name>p[style="background-color:red;width:100px;height:100px"] 然后Tab就会出现什么什么的自己试试就知道了。
ul>li{a$}*10
dom 选择器，节点类型：7.40之前都是安装sublime插件，

78.DOM基本操作
1.对节点的增删改查：
(1)查：
document：如果说给html标签上面再套上一个标签，那这个标签就是document，document标签才代表的是整个文档，html代表的只是文档里面的根标签
1）document.getElementById('')：通过id的方法查找标签，注意这里是Element，因为一个id只对应一个元素，所以是Element不是Elements。
（用的最少，使用比name还少，html中用得最多的也是class，很少用id，因为在前后端整合的时候，别人可能会将id改变，所以很少用）
例1：
    var div = document.getElementById('only');
2）document.getElementsByTagName('')：利用名字查找标签，这里就是Elements了，因为查找到的是一组标签（比较常用 任何浏览器都能用）
注意：咱们学dom，bom开始包括以后学的一系列东西，一切系统给咱们生成成组的方式基本上全是类数组（既是对象又是数组）
例1：
    var div = document.getElementsByTagName('div');
//这里得到的div也是类数组
例2：不是很懂注释的部分！
    var div = document.getElementsByTagName('div')[0];
//这个得到的就是第一个div标签了，就可以使用div.style.backgroundColor 来对div标签进行更改了，但要是没有选中，直接用类数组更改标签，会报错。
3）document.getElementsByClassName(''); （没有TagName常用，因为有兼容性的问题，有的浏览器不能用ie8和ie8以下的版本中没有
例1：
    var div = document.getElementsByClassName('a')[0];
//假如只有一个div标签也一定要加[0]因为，这样被选择出来的是数组，单拿出第一个要用下角标[0];
4）var div = document.getElementsByName(); ie不支持，只有部分标签name可生效（表单，表单元素，img，iframe）
例1:
    var div = document.getElementsByName('age')[0];
5）.querySelector() // css选择器   
最好不要用：在ie7和ie7以下的版本中没有，经过这个函数选出的元素不是实时的，需要副本保存的话可以用这个，但是正常不用。
例1：会将div下span中的类名为demo的p标签选中（只选中一个）
    var strong = document.querySelector('div > span strong.demo');
6） .querySelectorAll() // css选择器 
最好不要用：同上原因
例1：会将div下span中的类名为demo的p标签选中（选出多个）
    var strong1 = document.querySelectorAll('div > span strong.demo');

通过一个函数它的周边环境也能选中某个元素，所以接下来的这些方法就是基于一个元素它周边这种辐射性的东西能选出元素来
2.遍历节点树（任何一个浏览器都好使）
1） parentNode -> 父节点  (最顶端的parentNode为#document);，一个元素就有一个父节点
例1：



   
   

   
   
   

//被选出来的strong可以利用strong.parentNode找到父亲div标签，再.parentNode就可以找到div的父亲body标签，再一层一层往上找，最终的就是document了，再往上找那就是null了
2） childNodes -> 子节点们，一个元素可以有多个子节点
例1：



   
   

    123
   
   
   
   

//这里div一共有7个子节点，首先从div结束到注释开始之前都是文本元素，然后是注释元素，然后又是文本元素，然后是strong标签，然后是文本元素等等，所以一共是7个
3）firstChild -> 第一个子节点  
4）lastChild -> 最后一个子节点
例1：上一道题div.firstChild就是 "              123          ",div.lastChild就是#text
5）nextSibling->后一个兄弟节点 previousSibling->前一个兄弟节点
例1：



   
   

    123
   
   

//strong.nextSibling是#text，strong.nextSibling.nextSibling是null，
//strong.nextSibling.previousSibling是strong标签自己

3.基于元素节点树的遍历（除了children以外，所有的都是包含ie9及以下不兼容）
1）parentElement -> 返回当前元素的父元素节点 (IE不兼容)
例1：



   
   

    123
   
   

//div.parentElement得到结果是body，div.parentElement.parentElement得到结果是html，div.parentElement.parentElement.parentElement得到结果是null，而不是document，因为document不是元素节点，它自成节点。
2）children -> 只返回当前元素的元素子节点
例1：div元素子节点就是strong，没有别的了

   
   

3）node.childElementCount  === node.children.length当前元素节点的子元素节点个数(IE不兼容)
4）
firstElementChild -> 返回的是第一个元素节点(IE不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
例1：

    123
   
   
   

//div.firstElementChild就是strong标签，div.lastElementChild就是span标签
5）nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点（IE不兼容)
例1：



   
   

    123
   
   
   

//strong.nextElementSibling  -->span
//strong.previousElementSibling -->null
//strong.nextElementSibling.previousElementSibling --> 自己本身

81.节点的四个属性
1.nodeName :元素的标签名，以大写形式字符串表示，只读
例1：



   
   

    123
   
   
   

 

//div.childNodes[1].nodeName  -->"comment"注释
//div.childNode[3].nodeName -->"STRONG"
//div.childNodes[3].nodeName = "abc"进行更改之后再访问div.childNodes[3].nodeName还是"STRONG"。更改不了，只能读取不能写入。
2）nodeValue ：Text节点或Comment节点的文本内容,可读写，其他的不行，其他只能返回null
如上题：文本元素部分
//div.childNodes[0].nodeValue结果为"
    123
    "
//div.childNodes[0].nodeValue = "234"就能将值进行更改，再访问就是"234"。
//div.childNodes[0]取的是节点，div.childNodes[0].nodeValue取的是内容。
如上题：注释元素部分
//div.childNodes[1]结果为    
//div.childNodes[1].nodeValue = "this is comment"进行更改之后，再访问就是
3）nodeType： 该节点的类型，只读