javascript的原生dom知识点

当前主流的动态Web开发技术*

   动态：网页的内容，可以在不同的时间、对不同客户呈现出不同的内容。
   (1)JSP=HTML+Java
   (2)ASP=HTML+C#
   (3)PHP=HTML+php

DHTML

  Dynamic HTML，动态HTML、动态网页，指的是页面的表现、样式是可以随着用户的操作而发生不同的变化。DHTML=HTML+CSS+JavaScript，即DHTML是把已经存在的三项技术整合起来进行组合应用，就是使用JavaScript来“增删改查”HTML元素和CSS样式，最终使得页面呈现一个更友好的交互界面。
     DHTML对象：
       (1)BOM：window 、history 、location 、document、screen、event、navigator
             用于JavaScript脚本与浏览器进行交互
       (2)DOM：HTML页面中的每个元素都被JavaScript理解为一个DOM对象
             用户JavaScript脚本与当前显示HTML文档进行交互；

DOM树

     a：DOM元素树：以document对象为根，每个HTML标签都是元素树的一个节点
     b：DOM节点树：以document对象为根，每个标签、文本、属性、注释都是节点树上的一个节点
  Node对象的成员属性：
     nodeTpye:Number类型
     nodeName:String类型
     nodeTpye:String类型




  Node对象的节点树属性：
    1、parentNode：Node类型，当前节点的那个唯一的直接父节点对象
    2、childNodes：NodeList类型，当前节点的所有子节点，组成一个类数组对象
    3、firstChild：Node类型，当前节点的第一个子节点
    4、lastChild：node类型，当期节点的最后一个子节点
    5、nextSibling：Node类型，当前节点的下一个兄弟节点
    6、previousSibling：Node类型，当前节点的前一个兄弟节点


Node对象的元素树属性：
    1、parentElementNode：Node类型，当前元素节点的唯一的直接父节点对象
    2、childred：NodeList类型，当前节点的所有元素子节点，组成一个类数组对象
    3、firstElementChild：Node类型，当前节点的第一个元素子节点
    4、lastElementChild：node类型，当期节点的最后一个元素子节点
    5、nextElementSibling：Node类型，当前节点的下一个元素兄弟节点
    6、previousElementSibling：Node类型，当前节点的前一个元素兄弟节点
    7、Element.innerHTML   Element.innerText   Element.textContent
    8、e.getAttribute('')   e.attributes['']     e.setAttributeNode()
         e.removeAttribute()    e.hasAttribute()
 ------------------------------------------------------------------------------------
   快速在DOM树中查找/选择元素节点：
   1、document.getElementById('id')：返回ElementNode
  注意：普通的元素节点没有此方法！
   2、document/node.getElementsByTagName('标签名')：返回NodeList一个数组
   3、document.getElementsByName('name属性的值')：返回NodeList一个数组
   4、document/node.getElementsByClassName('具备指定的class名')：返回NodeList一个数组
   5、document/node.querySelector('CSS选择器')：ElementNode，返回第一个的匹配的元素
   6、document/node.querySelectorAll('CSS选择器')：ElementNode，返回所有匹配的元素
   7、document.all --->返回NodeList，获取HTML中所有的元素节点对象

案例：
   三个小按钮点击HELLO WORLD，分别变红、变蓝、变绿
    

  <div id="msg">HELLO WORLD</div>     <button onclick="ChangeColor('red1')">变红</button>     <button onclick="ChangeColor('green1')">变绿</button>     <button onclick="ChangeColor('blue1')">变蓝</button>    <script>     function ChangeColor(className){         var div=document.getElementById('msg');         div.setAttribute('class',className);//setAttributeNode()支持老IE版本兼容性较好        //使用document创建一个不存在的节点        }    </script>

**使用DOM方法创建新的节点
   注意：页面中任意一个新节点都必须由document对象来创建——代码稍显复杂，
   但浏览器兼容性是最好的。
(1) var attr=document.createAttributeNode('属性名');
      attr.value='属性值';
      element.setAttributeNode(attr);
(2)创建新的元素节点
     var element=document.createElement('元素名');
     element.appendChild(element);
(3)创建新的文本节点
     var txt=doument.createTextNode('文本内容');
(4)创建新的注释节点
    var comment=document.createComment('注释内容');
(5)创建新的文档判断节点
    var fragment=document.createDocumentFragment();
     fragment.appendChild(xxx);
     fragment.appendChild(yyyy);
     parent.appendChild(fragment);
   注：文档片段中可以包含其他的子节点，待所有子节点添加完后，再将整个文档片段添加到
   DOM树中，从而提高页面渲染效率，防止页面闪屏问题。
说明：把一个新创建的节点添加到现存的DOM树上，可以使用如下两个方法：
  (1) parent.appendChild(newChild);
  (2) parent.insertBefore(newChild, exisingChild)


DOM操作————删除已有的节点
    var deletedChild=parentNode.removeChild(existingChild);
DOM操作————替换已有的节点
   var replaceChild=parentNode.replaceChild(newChild, existingChild);
DOM操作————删除属性节点
   element.removeAttribute('属性名')；
   element.removeAttributeNode(attrNode);




BOM:
通过BOM对象，JavaScript程序可以与当前的浏览器窗口进行交互。所有的BOM对象无需创建
因为浏览器已经内置设置好了。
Window：该类型的对象指当前的浏览器窗口，是一个全局对象，其中所有的
属性可以直接使用。
function Window(){
    this.window=new Window();    //window类型，表示浏览器中打开的窗口
    this.document=new Document();   //包含当前浏览器加载的文档信息
    this.screen=new Screen();     //包含有关客户端显示屏幕的信息
    this.history=new History();    //包含用户在浏览器窗口中访问过URL
    this.location=new Location();   //包含有关当前URL的信息 
    this.navigator=new Navigator();  //包含有关浏览器的信息
    this.event=new Event();     //包含当前所触发的事件对象
  }


Window对象常见属性
defaultStatus    设置或返回窗口状态栏中的默认文本
innerheight       返回窗口的文档显示区的高度
innerwidth        返回窗口的文档显示区的宽度
length               设置或返回窗口中的框架数量
name                设置或返回窗口的名称
opener              返回对创建此窗口的窗口的引用。
outerheight      回返窗口的外部高度
outerwidth       回返窗口的外部宽度
pageXOffset    设置或返回当前页面相当于窗口显示区左上角的X位置
pageYOffset    设置或返回当前页面相当于窗口显示区左上角的Y位置
parent              返回父窗口
self                   返回对当前窗口的引用
status               返回窗口状态栏的文本
top                    返回最顶层的先辈窗口


alert()               显示带有一段消息和一个确认按钮的警告框
blur()                把键盘焦点从顶层窗口移开
close()                  关闭浏览器窗口
confirm()              显示带有一段消息以及确认和取消按钮的对话框
createPopup        创建一个pop-up窗口
focus()                 把键盘焦点给予一个窗口
open()                  打开一个新的浏览器窗口或查找一个已命名的窗口
print()                  打印当前窗口的内容
prompt()              显示可提示用户输入的对话框，返回值可能是null/""/用户输入的内容


setInterval(fun,time)        按照指定的周期（以毫秒计）来调用函数或计算表达式
每隔指定的时间间隔，执行一次指定的功能。
setTimeout()       在指定的毫秒数后调用函数或计算表达式
间隔指定的时间后，执行一次指定的功能，仅执行一次。
clearInterval()     取消由setInterval()设置的timeout。
clearTimeout()    取消由setTimeout()方法设置的timeout


window.navigator 对象的使用
     常用的属性成员：
           userAgent: 返回浏览器/操作系统的信息
window.location 对象的使用
      Location 对象表示浏览器当前显示的页面的URL地址
      location.href  读取或设置当前浏览器显示的页面的url，用于页面跳转。
      reload() 重新加载当前页面/刷新


客户端实现页面跳转的方法有：
  1：使用超链接实现跳转 <a href="url"></a>
  2：使用表单提交实现跳转  <form action="url"></form>
  3：使用JS：location.href对象实现跳转  location.href="url"; location.assign("url")
  4：使用JS：window.open打开新页面    window.open("url");
  5：使用refresh元数据——见源代码被注释的第6行  <meat http-equiv="Refresh" content="3;url"/>


服务器端的可以实现页面跳转的方法——控制HTTP响应头


window.history 对象的使用
     History 中保存着当前浏览器访问的所有页面的历史顺序
        length: 访问历史中有多少个页面
        back()  退回到访问历史中的上一个页面
        forward()   前进到访问历史中的下一个页面
        go(num)   直接跳转到访问历史中的下num个页面 
       --->go(1)<==> back()     go(-1)<==> forward() 


window.screen 对象的使用
     Screen 对象代表当前浏览器窗口所在的显示屏幕
     <script>
         console.log('width:'+screen.width); //当前屏幕的水平分辨率
        console.log('height:'+screen.height);//当前屏幕的垂直分辨率
       console.log('avaiwidth:'+screen.availWidth);//当前屏幕的水平分辨率-任务条宽
       console.log('avaiHeigth:'+screen.availHeight);//当前屏幕的垂直分辨率-任务条宽
       如果隐藏了任务条就等价于当前屏幕的水平/垂直分辨率
    </script>


window.event 对象使用
      每当浏览器中发生一个事件时，浏览器会自动创建一个event对象
并传递给指定的事件处理函数。浏览器中的可以分为三种类型：
    (1) MouseEvent：包含事件源、事件发生坐标(x/y)
    (2) KeyEvent：keyCode
    (3) StateEvent：state


事件句柄(event handler)：每个事件发生时，浏览器会查看该事件是否指定对应的处理函数，
该函数即为event hanlder，若指定了，则浏览器会自动调用该函数并把创建的event对象传递进来


```
 (1)<button onclik="语句1，，，">//不推荐使用
 (2)<button onclik="自定义函数()">
 (3)<button id="btn3">  把HTML(内容)与JS(行为)彻底分离
          <script>
                 btn3.onclick=function(){
                     }
                  //或者
                btn3.setAttribute('onclick','f1()');
         </script>
```
  注意：若使用(1)和(2)进行多次绑定，则只有第一次绑定生效；若使用(3)进行多次绑定，只有最后一次
 绑定生效。


HTML元素中的事件的冒泡机制
```
    <div id="id1" onclick="">
        <div id="d2" onclick="">
             <div id="d3" onclick="">
             </div>
       </div>
   </div>
```
    若#d1被单击，则单击事件只对#d1生效； 
    若#d2被单击，则单击事件会先后对#d2、#d1生效：
    若#d3被单击，则单击事件会先后对#d3、#d2、#d1生效
  可以在事件处理函数中使用下述语句取消子元素触发的事件继续冒泡给父元素：
   event.cancelBubble=true;


event 对象的使用----浏览器兼容性相当不好
   如何获取event对象
      IE：HTML/Javascript中的事件句柄中都可以直接使用event对象
      FF：HTML中的事件句柄可以直接使用event对象；javaScript中的事件句柄不能直接
使用event对象！
     解决方案：
     <button onclick="f1(event)">             js:function f1(e){ e....}
     <button></button>                             js:btn.onclick=function(e){  e...}


** 获取event 对象的属性
        cancelBubble：boolean 类型，默认为false，指定是否取消冒泡，指定为true的话
当前事件不会再向父元素传递。
        clientX：事件发生时相对于浏览器显示区域的X坐标
        clientY：事件发生时相对于浏览器显示区域的Y坐标
        screenX：事件发生时相对于浏览器显示的X坐标
        screenY：事件发生时相对于浏览器显示的Y坐标
        offsetX：事件发生时相对于事件源对象的X坐标
        offsetY：事件发生时相对于事件源对象的Y坐标
        keyCode：键盘事件发生时，按下的键的键码
        srcElement：IE/Webkit中用于获取事件源


JQuery方法:
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})