js的对象操作~~~~三

继上一篇文章，DOM对象往下讲。

10、元素对象（element对象）
** 要操作element对象，首先必须要获取到element，
- 使用document里面相应的方法获取
** 元素对象操作属性：对属性进行增加 修改 删除
getAttribute(“属性的名”); // 获得属性的值
setAttribute(“属性名”,”属性值”); // 添加和修改
removeAttribute(“属性名”); // 移除属性

// 查找元素.
var input = document.getElementsByTagName("input")[0];
//alert(input.getAttribute("value"));//测试
//修改name属性的值
input.setAttribute("name","uname");//alert(input.getAttribute("name"));测试
// 添加一个属性id
alert(input.getAttribute("id"));
input.setAttribute("id","username");//alert(input.getAttribute("id"));测试
alert(input.name);
input.removeAttribute("name");
alert(input.getAttribute("name"));

【在标签下查找标签】
** 使用属性 childNodes，但是这个属性兼容性很差
** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法

    // 查找第一个ul下的所有的li标签.
    // 1.先查找第一个ul标签.
    var city1 = document.getElementById("city1");
    // 2.再找ul下的li标签.
    //var childs = city1.childNodes; 测试
    //alert(childs.length);   测试
    var lis = city1.getElementsByTagName("li");//避免使用childNodes
    alert(lis.length);

11、Node对象 :节点对象（节点包括 元素节点 属性节点 文本节点），属性对象
1.元素节点
nodeName：标签名 nodeType: 1 nodeValue:没有 null
属性节点
nodeName: 属性名 nodeType: 2 nodeValue:属性的值
文本节点
nodeName: #text nodeType: 3 nodeValue:文本内容
也就是说，对不同“节点操作”时，返回的结果时不一样的，例如说，对元素节点操作时，返回结果为：标签名字 。 nodeType = 1 ，没有返回值。而对其他的操作时，返回结果又不一样，看下面例子

    // 分别获得元素节点的 节点名称 节点类型 节点的值.

            // 1.元素节点
            var input = document.getElementById("username");
            //alert(input.nodeName);    // output INPUT
            //alert(input.nodeType);    // output 1
            //alert(input.nodeValue);   // output null
            // 2.属性节点
            var attr = input.getAttributeNode("name"); // 获得属性节点.
            //alert(attr.nodeName);     // output   name
            //alert(attr.nodeType);     // output   2
            //alert(attr.nodeValue);    // output   username

            // 3.文本节点
            var p = document.getElementsByTagName("p")[0];
            var t = p.firstChild;
            alert(t.nodeName);              // output  #text
            alert(t.nodeType);              // output  3
            alert(t.nodeValue);             // output  文本

2.节点对象的父节点 子节点及同辈节点

<ul id="ul1">
        <li id= "li1">qqqqq</li>
        <li>wwww</li>
</ul>

1） * 父节点：

//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);

2）* 子节点：
firstChild：获取第一个子节点
lastChild：获取最后一个子节点

    var ul1 = document.getElementById("ul1");
    //第一个子节点
    var li1 = ul1.firstChild;
    alert(li1.id);
    //lastChild：获取最后一个子节点
    var li4 = ul1.lastChild;
    alert(li4.id);

3）* 同辈节点：
nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

    //li直接关系是同辈节点
    //获取li的id是li3的上一个和下一个兄弟节点
    var li3 = document.getElementById("li3");
    alert(li3.nextSibling.id);
    alert(li3.previousSibling.id);

4）* 检测节点中是否有子节点和属性.
hasChildNodes()
hasAttributes()
12操作dom树

【总结】* 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入， 两个参数，新节点，旧节点
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换
* 复制节点方法：
cloneNode(boolean)：

//添加节点
    //获取li3 标签
    var li13 = document.getElementById("li13");
    //创建li
    var li15 = document.createElement("li");
    //创建文本
    var text15 = document.createTextNode("董小宛");
    //把文本添加到li下面 appendChild
    li15.appendChild(text15);
    //获取到ul
    var ul21 = document.getElementById("ulid21");
    //在<li>貂蝉</li>之前添加 <li>董小宛</li> 
    //insertBefore(newNode,oldNode)新节点，旧节点
    ul21.insertBefore(li15,li13);

//删除节点
    //获取li标签
    var li24 = document.getElementById("li24");
    //获取父节点：两种方式  1、通过id获取 ； 2、通过属性 parentNode获取
    var ul31 = document.getElementById("ulid31");
    //删除（通过父节点）
    ul31.removeChild(li24);

//替换节点
    //获取li34
    var li34 = document.getElementById("li34");
    //创建li
    var li35 = document.createElement("li");
    //创建文本
    var text35 = document.createTextNode("张无忌");
    //把文本添加到li下面
    li35.appendChild(text35);
    //获取ul
    var ul41 = document.getElementById("ulid41");
    //替换节点，父节点来调用该方法
    ul41.replaceChild(li35,li34);   

//复制节点
    //获取ul
    var ul41 = document.getElementById("ulid41");
    //复制ul，放到类似剪切板里面
    var ulcopy = ul41.cloneNode(true)
    //获取到div
    var divv = document.getElementById("divv");
    //把副本放到div里面去
    divv.appendChild(ulcopy);

13、innerHTML属性，虽然 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

第一个作用：获取文本内容

    //获取span标签
    var span1 = document.getElementById("sid");
    alert(span1.innerHTML);

第二个作用：向标签里面设置内容（可以是html代码）

    //向div里面设置内容 <h1>AAAAA</h1>
    //获取到div
    var div11 = document.getElementById("div11");
    //设置内容
    div11.innerHTML = "<h1>AAAAA</h1>";

14、JS中的事件:记住这些常见的时间旧可以了额

onclick:单击
ondblclick:双击
onchange:列表框改变事件
onmouseover:鼠标放在上面 onmouseout:鼠标离开 onmousemove:鼠标移动.
onload:页面加载时间 onunload:页面的卸载事件.
onblur:失去焦点 onfocus:获得焦点.
onkeyup:键盘事件 onkeydown:键盘事件

js这一块就简单讲到这里，会把一些案例放在一个文件给大家下载