五、javaScript基础&DOM（二）

笔记内容导图：

一、元素对象（element对象）

要操作element对象，首先要获取到element （使用document里面相应的方法获取）

element里面的方法

getAttribute("属性名称") ：获取属性里面的值

<html>
<body>    
    <input type="text" id="a" class="haha" value="name">
</body>    
<script type="text/javascript">   
    var input1 = document.getElementById("a");
    alert(input1.value);   //name
    alert(input1.getAttribute("value"));   //name

    alert(input1.class);   //undefined   注意：class取不到值得原因：class是一个关键字。所以只能用getAttribute取class的值
    alert(input1.getAttribute("class"));    //haha

    alert(input1.id);   //a
    alert(input1.getAttribute("id"));   //a
</script>
</html>

setAttribute("name","value") : 设置属性

removeAttribut(name) : 删除属性

<html>
<body>    
    <input type="text" id="a" value="name">
</body>    
<script type="text/javascript">   
    var input1 = document.getElementById("a");
    alert(input1.getAttribute("class"));  //null
    input1.setAttribute("class","haha");  //设置class属性，并且给值为haha
    alert(input1.getAttribute("class"));  //haha

    input1.removeAttribute("class");  //删除属性class
    alert(input1.getAttribute("class"));   //null
    input1.removeAttribute("value");  //删除属性value
    alert(input1.getAttribute("value"));   //name  注意：removeAttribute不能删除value！
</script>
</html>

获取标签下面的子标签

使用属性 childNodes，但是这个属性兼容性很差

html>
<body>    
    <ul id="ulid">
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
    </ul>
</body>    
<script type="text/javascript">   
    var ul11 = document.getElementById("ulid");
    var lis = ul11.childNodes;
    alert(lis.length); //在ie下结果是3，在火狐下是7
</script>
</html>

所以，获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法。该方法返回值是一个集合

<html>
<body>    
    <ul id="ulid">
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
    </ul>
</body>    
<script type="text/javascript">   
    var ul11 = document.getElementById("ulid");
    var lis = ul11.getElementsByTagName("li");
    alert(lis.length); //3
</script>
</html>

二、Node对象属性一

node对象常用属性：nodeName、nodeType、nodeValue

使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象。标签、属性、文本三种节点对应的nodeName、nodeType、nodeValue 值如下：（其中nodeType对应值最常用）

标签节点对应的值
- nodeName ：大写的标签名称如SPAN
- nodeType ：1
- nodeValue ：返回值是null
属性节点对应的值
- nodeName ：属性名称
- nodeType ：2
- nodeValue ：属性的值

文本节点对应的值

nodeName ：#text
nodeType ：3

nodeValue ：文本内容

<html>
<body>    
    <span id="spanid">哈哈呵呵</span>
</body>    
<script type="text/javascript">  
    //标签节点
    var span1 = document.getElementById("spanid");
    alert(span1.nodeType);  //1
    alert(span1.nodeName);  //SPAN
    alert(span1.nodeValue); //null
    //属性节点
    var id1 = span1.getAttributeNode("id");
    alert(id1.nodeType);  //2
    alert(id1.nodeName);  //id
    alert(id1.nodeValue);  //spanid
    //文本节点
    var text1 = span1.firstChild;        //获取文本节点方法 查看上一篇笔记 NODE接口的特性和方法 图
    alert(text1.nodeType);  //3
    alert(text1.nodeName);  //#text
    alert(text1.nodeValue);  //哈哈呵呵
</script>
</html>

三、Node对象的属性二

如下代码中：

<ul id="ulid">
    <li id="li1">aaa</li>
    <li id="li2">bbb</li>
    <li id="li3">ccc</li>
</ul>

父节点：
- ul是li的父节点
- parenNode ：返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
```
var li1 = document.getElementById("li1");
var ul = li1.parentNode;  //通过子节点li得到父节点ul
alert(ul.id);  //ulid
```
- document节点没有父节点

子节点：

li是ul的子节点
childNodes :得到所有子节点集合，但兼容性很差 (一般不用)
firstChild ：获取指定节点的第一个子节点

lastChild ：获取指定节点的最后一个子节点

<script type="text/javascript">  
    var ul1 = document.getElementById("ulid");
    var li1 = ul1.firstChild;  //得到第一个子节点
    alert(li1.id);  //li1

    var li3 = ul1.lastChild;  //得到最后一个子节点
    alert(li3.id);  //li3
</script>

同辈节点：

li之间关系是同辈节点
nextSibling ：返回一个给定节点的下一个兄弟（同辈）节点

previousSibling ：返回一个给定节点的上一个兄弟节点

<script type="text/javascript">  
    //获取li的id是li2的上一个和下一个兄弟节点
    var li2 = document.getElementById("li2");
    //alert(li2.nextSibling.id);  //li2
    alert(li2.previousSibling.id);  //li1
</script>

四、操作dom节点树

appendChild方法：添加子节点到末尾【类似于剪切黏贴的效果】

insertBefore(newNode,oldNode)方法：在某个节点之前插入一个新的节点【注意：不存在没有insertAfter()方法】

两个参数：要插入的节点，在谁之前插入。

插入一个节点时，节点不存在，就创建。 1.创建标签 2.创建文本 3.把文本添加到标签下面【通过父节点插入，不能自己插入】

<html>
<body>    
    <ul id="ulid">
        <li id="li1">aaa</li>
        <li id="li2">bbb</li>
        <li id="li3">ccc</li>
    </ul>
</body>    
<script type="text/javascript">  
    //需求：在id为li2的li节点之前插入一个新的节点li，id为li4
    var li2 = document.getElementById("li2");  //获取li2标签
    var li4 = document.createElement("li");  //创建li
    var text4 = document.createTextNode("hahahahaha");  //创建文本 createTextNode()方法
    li4.appendChild(text4);  //把文本添加到标签
    var ul = document.getElementById("ulid");  //获取ul  通过父节点插入，不能自己插入
    ul.insertBefore(li4,li2); //在li2之前添加li4
</script>
</html>

removeChild方法：删除节点【通过父节点删除，不能自己删除自己】

<html>
<body>    
    <ul id="ulid">
        <li id="li1">aaa</li>
        <li id="li2">bbb</li>
        <li id="li3">ccc</li>
    </ul>
</body>    
<script type="text/javascript">  
    //需求：删除li2
    var li2 = document.getElementById("li2");  //获取要杀出的li标签
    var ul = document.getElementById("ulid");  //获取父节点 （两种方式  1、通过id获取 ； 2、通过属性 parentNode获取）
    ul.removeChild(li2); //删除（通过父节点）
</script>
</html>

replaceChild(newNode,oldNode)方法：替换节点【不能自己替换自己，通过父节点替换】

两个参数：新的节点（替换成的节点），旧的节点（被替换的节点。）

<html>
<body>    
    <ul id="ulid">
        <li id="li1">aaa</li>
        <li id="li2">bbb</li>
        <li id="li3">ccc</li>
    </ul>
</body>    
<script type="text/javascript">  
    //需求：把li2替换成li4
    var ul = document.getElementById("ulid");
    var li2 = document.getElementById("li2");
    var li4 = document.createElement("li");
    var text4 = document.createTextNode("helloworld");
    li4.appendChild(text4);
    ul.replaceChild(li4,li2);
</script>
</html>

cloneNode(boolean): 复制节点【参数boolean是判断是否复制子节点】

<html>
<body>    
    <ul id="ulid">
        <li id="li1">aaa</li>
        <li id="li2">bbb</li>
        <li id="li3">ccc</li>
    </ul>
    <div id="divv" style="border:1px solid red;  width:200px; height:100px">
        
    </div>
    <input type="button" value="copy" onclick="copy();"/>
</body>    
<script type="text/javascript">  
    //需求：把ul列表复制到div中
    function copy(){
        var ul = document.getElementById("ulid");  //获取ul
        var ulcopy = ul.cloneNode(true);  //复制ul，放到类似剪切板里面
        var divv = document.getElementById("divv");  //获取div
        divv.appendChild(ulcopy);  //把副本放到div中
    }
</script>
</html>

注意：点击按钮几次复制几次

五、innerHTML属性

这个属性不是dom的组成部分，但是几乎所有浏览器都支持该属性。该属性多与div或span标签配合使用。
该属性第一个作用：获取文本内容

第二个作用：向标签里面设置内容（可以是html代码）【实际开发中常用】

<html>
<body>    
    <span id="sid">hello world</span>
    <div id="divv" style="border:2px dashed red; width:200px; height:150px;"></div>
</body>    
<script type="text/javascript">  
    //获取内容
    var s = document.getElementById("sid");
    alert(s.innerHTML);  //hello world

    //设置内容
    var div = document.getElementById("divv");
    //div.innerHTML ="AAAAAA";
    div.innerHTML ="<h1>AAAAAA</h1>";
</script>
</html>

六、js中的常用事件

鼠标移动事件

onmouseover:鼠标放在上面
onmouseout:鼠标离开

onmousemove:鼠标移动

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

鼠标点击事件

onclick:单击

ondblclick:双击　

<html>
<body>
    <form action="uploadFile" method="post">
        <input type="button" value="添加附件" onclick="addFile();">
    </form>
</body>
<script type="text/javascript">
    function addFile(){
        var file = document.createElement('input');
        file.setAttribute('id', 'temp_file');
        file.setAttribute('type', 'file');
        document.body.appendChild(file);
    }
</script>
</html>

加载与卸载事件

onload:页面加载时间

onunload:页面的卸载事件

<body onload="loadform()" onbeforeunload="unloadform()">
    <a href="http://www.baidu.com">百度</a>
</body>
<script type="text/javascript">
    function loadform(){
        alert("这是一个自动装载例子!");
    }
    function unloadform(){
        alert("这是一个卸载例子!");
    }
</script>

聚焦与离焦事件

onblur:鼠标失去焦点

onfocus:获得焦点

<html>
<body>
    请输入一个八位数字<input type="text" id="testdate" onblur="checkDate();" onfocus="focus1();">
</body>
<script type="text/javascript">
    function focus1(){
        alert("请输入一个八位数字");
    }

    function checkDate(){
        var date1 = document. getElementById("testdate").value;
        if(date1.match("^\\d{8}$")==null){
            alert("wrong");
        }else{
            alert("right");
        }
    }
</script>
</html>

键盘事件

onkeyup:

onkeydown:

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

列表框改变事件：onchange
提交与重置事件：submit/reset
选择与改变事件：select/change

posted @ 2016-05-31 14:19 淡若白叶阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部