您的位置：首页 > Web前端 > JavaScript

javascript基础（下）

2015-10-03 14:54 591 查看
四、DOM基础

1.DOM结构模型



2.XML DOM 和 HTML DOM 关系

    l  XML DOM 定义了访问和处理 XML
文档的标准方法

    l  HTML文档格式
符合XML语法标准，所以可以使用XML DOM API

    l  在XML DOM每个元素
都会被解析为一个节点Node，而常用的节点类型又分为

      •    元素节点  Element

      •    属性节点  Attr

      •    文本节点  Text

      •    文档节点  Document

    l  HTML DOM 定义了针对 HTML文档的对象，可以说是一套
更加适用于 JavaScript
技术开发 的API

    l  HTML DOM是对XML DOM的扩展

    l  进行 JavaScript DOM开发
可以同时使用 XML DOM
4000
和 HTML DOM

3.BOM 和HTML DOM关系图



 

4. Document对象

    l  每个载入浏览器的 HTML
文档都会成为 Document 对象

    l  常用属性

      •    all[]
提供对文档中所有 HTML 元素的访问  FF不支持

      •    forms[]返回对文档中所有 Form
对象引用

      •    body 
提供对 <body> 元素的直接访问

    l   常用方法

      •    getElementById()返回对拥有指定 id
的第一个对象的引用

      •    getElementsByName()返回带有指定名称的对象集合

      •    getElementsByTagName()返回带有指定标签名的对象集合

      write()向文档写 HTML
表达式 或 JavaScript
代码

 

5.DOM 节点常用属性

    l  nodeName


      •    如果节点是元素节点，nodeName返回这个元素的名称

      •    如果是属性节点，nodeName返回这个属性的名称

      •    如果是文本节点，nodeName返回一个内容为#text
的字符串

    l  nodeType


      •    Node.ELEMENT_NODE    ---1    --
元素节点

      •    Node.ATTRIBUTE_NODE  ---2    --
属性节点

      •    Node.TEXT_NODE       ---3    --
文本节点

    l  nodeValue


      •    如果给定节点是一个属性节点，返回值是这个属性的值

      •    如果给定节点是一个文本节点，返回值是这个文本节点内容

      •    如果给定节点是一个元素节点，返回值是 null

  代码演示：

     


        var h1 =  document.getElementById(“hi”);

        alert(h1.innerHTML);

       alert(h1.firstChild.nodeValue);

6.DOM节点常见操作

      •    DOM
获取节点

      •    DOM
改变节点

      •    DOM
删除节点

      •    DOM
替换节点

      •    DOM
创建节点

      •    DOM
添加节点

 

五、JavaScript常用事件

      •    鼠标移动事件

      •    鼠标点击事件

      •    加载与卸载事件

      •    聚焦与离焦事件

      •    键盘事件

      •    提交与重置事件

      •    选择与改变事件

  1.   鼠标移动事件

          mousemove/mouseout/mouseover


     代码演示：

<html>
<script language="JavaScript">
function mouseovertest(){
document.getElementById("info").value = "鼠标在输入框上";}
function mouseouttest(){
document.getElementById("info").value= "鼠标在输入框外";}
</script>
<body>
<input type="text" id="info" onmouseover="mouseovertest();" 					onmouseout="mouseouttest();"/>
</body>
</html>

 

  2.   鼠标点击事件

   click/dblclick/mousedown/mouseup


  代码演示：获取鼠标点击事件的位置

<span style="font-size:12px;"><strong> document.onlick=processClick;
function processClick(evt){
evt=evt||window.event;
var x=0,y=0;    </strong></span>
<span style="font-size:12px;"><strong>           //如果事件对象有pageX属性,对应firefox,opera,chrome,safari浏览器   </strong></span>
<span style="font-size:12px;"><strong>        if(evt.pageX){
x=evt.pageX;
y=evt.pageY;
}     </strong></span>
<span style="font-size:12px;"><strong>        //如果对象有clientX属性,对应IE浏览器
else if(evt.clientX){
var offsetX=0,offsetY=0;
//IE6及其以上版本
if(document.documentElement.scrollLeft){
offsetX=document.documentElement.scrollLeft;  </strong></span>
<span style="font-size:12px;"><strong>                offsetY=document.documentElement.scrollTop;
}        </strong></span>
<span style="font-size:12px;"><strong>               //IE较旧的版本
else if(document.body){
offsetX=document.body.scrollLeft;
offsetY=document.body.scrollTop;       </strong></span>
<span style="font-size:12px;"><strong>               }
x=evt.clientX+offsetX;
y=evt.clientY+offsetY;
}
alert("you clicked at x="+x+" y="+y);
}
</strong></span>

3.   加载与卸载事件

    load/unload

  代码演示：

<span style="font-size:12px;"><strong> </strong></span><pre class="html" name="code"><span style="font-size:12px;color:#000000;"><strong><html>
<head>
<script Language="JavaScript">
function loadform(){
alert("这是一个自动装载例子!");
}
function unloadform(){
alert("这是一个卸载例子!");
}
</script>
</head>
<body onload=“loadform()” onbeforeunload=“unloadform()”>
</body></strong></span>
<span style="font-size:12px;color:#000000;"><strong></html>
</strong></span>



4.   聚焦与离焦事件

    focus/blur

  代码演示：

<span style="font-size:12px;"><strong><html>
<script language="JavaScript">
function checkDate(){
var date1 = document. getElementById("testdate").value;
if(date1.match("^\\d{8}$")==null){</strong></span>
<span style="font-size:12px;"><strong>                alert("wrong");</strong></span>
<span style="font-size:12px;"><strong>            }else{</strong></span>
<span style="font-size:12px;"><strong>                alert("right");</strong></span>
<span style="font-size:12px;"><strong>              }
}
</script>
<body>
请输入一个八位数字<input type="text" id="testdate" onblur="checkDate();">
</body>
</html>
</strong></span>

5.   键盘事件

    keydown/keyup/keypress 

  代码演示：

 

<strong><span style="font-size:12px;"><html>
<script language="JavaScript">
function submitform(e){
if(e.keyCode){
if (e.keyCode == 13) </span><span style="font-size:12px;">{</span></strong>
<span style="font-size:12px;"><strong>                    document.forms(0).submit();</strong></span>
<span style="font-size:12px;"><strong>                  }
}else{
if (e.which == 13) {</strong></span>
<span style="font-size:12px;"><strong>                 document.forms(0).submit();</strong></span>
<span style="font-size:12px;"><strong>                  }
}
}
</script>
</strong></span><span style="font-size:12px;"><strong><body>
没有按钮的表单，用回车键提交
<form action="login">
<input type="text" name="username" onkeypress="submitform(event);"/>
</form>
</body>
</html>
</strong></span>

6.   提交与重置事件

submit/reset
 

<span style="font-size:12px;"><strong><html>
<script language="JavaScript">
function isDelete(){
var isdelete= window.confirm("你确定要删除吗？");
if(isdelete){
return true;
}
else{
return false;
}
}
</script>
</strong></span><span style="font-size:12px;"><strong><body>
<form action="delete" onsubmit="return isDelete();">
姓名： 张三 年龄：23 学校：清华大学
<input type="submit" value="删除">
</form>
</body>
</html>
</strong></span>

7.   选择与改变事件

select/change
    
代码演示：(表单联动)

<span style="font-size:12px;"><strong><html>
<script src="content.js" language="javascript"></script>
<body>
<select id="provice" onchange="changecontent();">
<option value="0">请选择省份</option>
<option value="1">河北</option>
<option value="2">山东</option>
</select>
<select id="city"></select>
</body>
</html>
</strong></span>
<span style="color:#ff0000;"><strong>content.js
</strong></span><span style="fon
9ceb
t-size:12px;"><strong>  var city = new Array();
city[0] = new Array("");
city[1] = new Array("秦皇岛", "唐山");
city[2] = new Array("济南", "青岛");
function changecontent(){
var id = document.getElementById("provice").value;
var opts = document.getElementById("city").options;
opts.length = 0;
for (var i = 0; i < city[id].length; i++) {
opts[opts.length] = new Option(city[id][i], i);
}
}
</strong></span>

 

8.    事件的其它问题

   l  阻止默认事件

<span style="font-size:12px;"><strong>if(e&&e.stopPropagation){

e.preventDefault();

}else{

window.event.returnValue = false;

}

</strong></span>

 

l  阻止事件传播

<span style="font-size:12px;">if(e&&e.stopPropagation){

e.stopPropagation();

}else{

window.event.cancelBubble = true;

}

</span>


 

 

 
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                html
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航