JavaScript 学习

DOM:将HTML看做XML来处理，代表着动态HTML真正的跨平台的，语言独立的解决方案的重要转变
动态HTML:简言之：是HTML动起来，是一种综合性的技术
DOM诞生的催化剂
js dom就是使用js对html标签进行增删改查操作

document.documentElement:返回HTML根元素
 var ohtml = document.documentElement;
 alert(ohtml.nodeName);

firstChild：获取下级节点的第一个节点的节点名称
 ohtml.firstChild.nodeName也可以使用
 ohtml.childNodes[0].nodeName
lastChild：获取下级节点的最后一个节点的节点名称

childNodes[0]：获取某个节点的节点列表中的第一个节点
 ohtml.childNodes[0].nodeName
childNodes.item(0)：和上面的作用一样
childNodes.length：获取子节点数量(第一级子节点)
 ohtml.childNodes.length

parentNode：获取节点的父节点
 var ohtml = document.documentElement;
    var ohead = ohtml.childNodes[0];
    var obody = ohtml.childNodes[1];
         alert(ohead.parentNode.nodeName);
         alert(obody.parentNode==ohtml);

 

previousSibling：同级节点的上一个节点
nextSibling：同级节点的下一个节点
ownerDocument：指向节点所在的文档
    var ohtml = document.documentElement;
            var ohead = ohtml.childNodes[0];
            var obody = ohtml.childNodes[1];
            alert(obody.previousSibling.nodeName);
            alert(ohead.nextSibling.nodeName);

 

getAttribute(name)：获取节点中属性为name的属性(Attribute)
 var li = document.getElementById('li1').childNodes[0];
            alert(li.getAttribute('href'));
setAttribute(name,newvalue):将节点中属性为name的属性值更改为newvalue
 li.setAttribute('href','http://www.baidu.com')
removeAttribute(name):删除节点中名称为name的属性

getElementsByTagName()：返回一个列表，这些列表的特点是<后面的节点名称相同
        var items = document.getElementsByTagName('a');
            for (var i = 0; i < items.length; i++) {
                alert(items[i].getAttribute('href'));
            }

 

getElementsByName()：获取name属性的值相同的元素，在选择单选按钮时很好用
getElementById()
注意:如果给定的元素匹配某个元素的name属性的值，则也会返回这个元素，当然如果有匹配的ID值，首先返回此元素，如果没有这个元素，则返回name属性的值匹配的元素
这一点在IE8中依然存在，算是IE的一个bug

 

table方法：

HTML给<table>,<tbody>,<tr>等元素添加了一些特性和方法，以便于简单快速的创建table表格
给<table/>元素添加一下属性：
cation:指向caption元素，如果存在的话
tBodies:<tbody/>元素的集合
tFoot:指向<tfoot/>元素(如果存在)
tHead:指向<thead/>元素
rows:表格中所有行的集合
createTHead:创建<thead/>元素并将其放入表格

createTFoot:创建<tfoot/>元素并将其放入元素
createCaption:创建<caption/>元素并将其放入表格
deleteThead():删除<thead/>元素
deleteTFoot():删除<tfoot/>元素
deleteCaption():删除<caption/>元素
deleteRow(position):删除指定位置的行
insertRow(position):在行的指定位置插入新行

 

给<tbody/>元素添加如下添加以下内容
rows:<tbody/>中所有行的集合
deleteRow(position):删除指定位置的行
insertRow(position):在rows集合中的指定位置插入新行
<tr/>元素添加以下内容
cells:</tr>元素中所有单元格的集合
deleteCell(position):删除指定位置的单元格
insertCell(position):在指定位置插入新的单元格