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:键盘事件
