JS(5)

1. window 对象
     1. window对象的属性
         window对象的属性，又都是对象类型的
         1. screen 对象
             访问screen屏幕对象 ：
                 et :
                     console.log(window.screen);
                     console.log(screen);
             获取屏幕尺寸信息 ：
                 1. width/height : 获取屏幕的宽高
                 2. availWidth/availHeight : 获取屏幕实际可用的宽高
                      实际可用宽高是屏幕宽高减去任务栏的高度/宽度
                      不同的操作系统，任务栏高度不同：XP-40px,Win7-30px;
         2. history 对象
                 作用 ： 包含当前窗口访问过的所有URL
                 属性和方法 ：
                     1. 属性：
                         length : 当前窗口访问过的URL数量
                     2. 方法：
                         1. back() : 相当于后退按钮
                         2. forward() : 相当于前进按钮
                         3. go(num) : 跳转几步，num取值可正可负
                              正值表示前进几步，负值表示后退
         3. location 对象
             1. 作用 ：location对象保存的是当前窗口地址栏的信息
                                 也是当前页面的URL
             2. 属性 ：
                     href : 可以获取当前窗口正浏览页面的URL
                                  如果给href属性赋值，相当于页面跳转,
                                  在当前窗口中实现内容重定向
             3. 方法 ：
                     reload(param); 重载页面，相当于刷新操作
                     参数 ：
                         可选，默认为false,表示从缓存中加载
                         可设置为true,表示从服务器端重新请求，加载页面
       4. navigator 对象
             作用 : 保存浏览器相关的信息
2. DOM （document对象）
     1. DOM ：文档对象模型，核心是document对象，封装了所有的
                      HTML元素，及操作HTML元素的属性和方法
     2. 节点对象 ：
         网页在加载的过程中，会自动封装文档中所有的内容，
         生成一颗DOM树，包含HTML标签，文本，注释，每个标签，
         标签内容，标签属性，注释内容都对应称为节点
         1. 节点分类 ：
             1. 元素节点 - 网页中的每个标签都是元素节点
             2. 属性节点 - 每个标签中的标签属性都是属性节点
             3. 文本节点 - 标签中的文本内容
             4. 注释节点 - 文档中每段注释，都对应成一个节点
             5. 文档节点 - 整个HTML文档 document
                 et :
                     <a href="#">百度</a>
                     元素节点 ：<a></a>
                     属性节点 ：href
                     文本节点 ：百度
         2. 节点操作 ：
             1. 获取节点
             2. 读取节点内容
             3. 创建节点
             4. 修改节点
             5. 删除节点
         3. 获取元素节点 ：
             1. 根据标签名获取元素节点 ：
                     document.getElementsByTagName('a');
                     参数 ：标签名
                     返回值 ：节点列表（类数组结构,可以通过下标访问）
             2. 根据标签的class属性值，获取元素节点
                     document.getElementsByClassName('c1');
                     参数 ：class属性值
                     返回值 ：节点列表
             3. 根据标签name属性值获取元素节点
                     document.getElementsByName('uname');
                     参数 ：name属性值
                     返回值 ：节点列表
             4. 根据标签的id属性值获取具体的节点对象
                     document.getElementById('box');
                     参数 ：id属性值
                     返回值 ：具体的节点对象
             元素节点常用属性 ：
                 1. innerHTML ：用来设置或读取元素节点的标签内容，
                      赋值时，可识别HTML标签。
                 2. innerText :设置或读取元素节点的标签内容，
                      赋值时，不能识别HTML标签。
                 3. value : 用来设置或读取表单元素的值
             使用注意 ：
                 根据代码从上到下的执行顺序，获取元素节点的操作，
                 需在body加载完毕之后执行，注意代码书写顺序
             练习 ：
                 1. 创建页面，添加div， 文本框，按钮
                 2. 点击按钮时，将文本框中的内容以一级标题的形式
                 显示在div中
       4. 获取或设置元素节点的属性：
                 标签属性在JS中视为是元素节点对象的属性
                 1. 获取标签属性
                         方法 ：getAttribute('attrName');
                         参数 ：属性名
                         返回值 ：指定属性的值
                 2. 设置标签属性
                         方法 ：setAttribute('attrName','value');
                         参数 ：属性名与对应的属性值
                 3. 移除标签属性
                         方法 ：removeAttribute('attrName');
                         参数 ：属性名
                 4. 使用点语法访问对象属性
                         1. 设置属性值 ：
                                 elem.id = ""; //设置id属性值
                                 elem.className = ""; //设置class属性值
                                 注意 ：class是JS关键字，不能直接使用
                         2. 获取属性值
                                 console.log(elem.id);
                         3. 移除属性
                                 elem.id = ""; //空字符串
                                 elem.id = null;
                 练习 ：
                     1. 创建超链接，链接地址为百度
                     2. 创建按钮，实现点击按钮，修改超链接的连接
                     地址，改为http://www.tmooc.cn
         5. 操作元素样式：
             1. 可以通过属性id,class对应选择器，为元素添加样式
                 et :
                     elem.setAttribute("class","c1");
                     elem.className = "";
             2. 访问节点对象的style属性，操作元素行内样式
                     行内样式 :
                         <h1 style="color:red;font-size:20px;"></h1>
                     使用 ：
                         通过元素节点访问style属性，style本身也是对象，
                         由属性和值组成
                         操作样式，实际是访问style对象的属性，为其赋值
                         et :
                             elem.style.color = "";
                         注意 ：
                             1. 一个单词构成的CSS属性，可以直接访问
                             2. CSS属性名中出现多个单词，使用‘-’连接时，
                                 在JS中一律改成驼峰标识
                                     et :
                                         elem.style.fontSize = "20px";
                                         elem.style.backgroundColor = "red";
                             3. 属性值以字符串形式赋值
         6. 读取节点类型信息：
             1. 查看节点类型
                     属性 ： nodeType
                     取值 ：
                                     1    当前为元素节点
                                     2         当前为属性节点
                                     3         当前是文本节点
                                     8    当前是注释节点
                                     9    当前是文档节点
             2. 获取节点名称
                     属性 ：nodeName
                     取值 ：
                                     元素/属性节点  返回元素名/属性名
                                     文本节点              返回#text
                                     注释节点                返回#comment
                                     文档节点                返回#document
         7. 节点对象的层次属性：
                 1. parentNode
                         获取当前节点对象的父节点
                 2. childNodes
                         表示获取当前节点下所有的子节点,返回子节点数组。
                         包含文本节点。（换行也会被视为一个文本节点）
                 3. children
                         获取子节点，只获取子元素节点，
                         忽略文本节点和换行。返回子节点数组
                 4. nextSibling
                         获取下一个兄弟节点
                 5. nextElementSibling
                         获取下一个兄弟元素节点
                 6. previousSibling
                         获取前一个兄弟节点
                 7. previousElementSibling
                         获取前一个元素兄弟节点
                 8. attributes
                         获取当前元素节点所有属性节点的集合
         8. 动态操作网页
                 1. 在网页中插入元素
                     1. 创建元素节点
                             var div = document.createElement('div');
                             参数 ：标签名
                             返回值 ：创建好的元素节点
                          为元素添加文本内容 ：
                             1. div.innerHTML/innerText
                             2. 创建文本节点
                                  var text = document.createTextNode('');
                                  参数 ：文本内容
                                  返回值 ：文本节点
                     2. 添加节点
                             不管是在网页中追加子节点，还是为元素节点添加
                             文本节点，所有的添加操作都由父元素执行
                             语法 ：
                                 父节点.appendChild(childNode);
                                 默认在父节点的末尾添加子节点
                             注意 ：
                                 文本节点是元素节点的子节点
                             练习 ：
                                 1. 使用JS创建div
                                 2. 设置div id="container"
                                 3. 设置div文本为"动态创建的div"
                                 4. 添加到body中显示
                     3. 在指定位置插入元素节点
                             只有父节点能执行插入，删除操作
                             语法：   
                                     parentNode.insertBefore(newElem,oldElem);
                                     表示在oldElem之前插入newElem
                     4. 删除节点
                             语法 ：
                                 parentNode.removeChild(elem);
                                 在父节点中删除指定的子节点
     3. 事件
         1. 事件是由用户行为激发的操作
         2. 事件处理函数
                 1. 鼠标事件 ：
                         onclick                单击
                         ondbclick            双击
                         onmouseover        鼠标移入元素
                         onmouseout        鼠标移出元素
                         onmousemove        鼠标在元素内移动
                 2. 加载完毕后执行
                         onload                元素或文档加载完毕之后触发
                 3. 状态改变事件
                         常用于表单元素
                         onfocus                表单元素获取到焦点时触发
                         onblur                失去焦点时触发
                         onchange            元素内容发生改变并且元素失去
                                                     焦点时触发
                         oninput                实时监听输入，只要输入内容发生
                                                     变化，都会触发
                         onsubmit            当表单被提交时触发
                 4. 键盘事件
                         onkeydown            键盘按键被按下时触发
                         onkeyup                按键抬起时触发
                         onkeypress        键盘被按压
         3. 事件绑定方式
                 将事件处理函数绑定到元素节点上，由用户对元素
                 节点的不同操作，触发相应的事件
                 1. 内联方式
                         在标签中通过属性的方式绑定事件
                         <button onclick = "alert('单击');">点击</button>
                 2. js 动态绑定事件
                         div.onclick = function(){
                             //事件触发后要执行的操作
                         };
                 3. W3C 标准事件监听
                         div.addEventListener('click',function(){});
                         function clickEvent(){
                        
                         }
                         div.addEventListener('click',clickEvent);