DOM ---相关学习

document 是内存自动创建的，是dom最底层的对象。

document提供了很多方法。

1.节点的操作

document.body : 获取body节点

    var obody = document.body;

.childNodes ：获取的是body下面的所有子节点，不包含孙节点。但是包含了元素节点和文本节点。

var nodearr = obody.childNodes;

获得第一个子节点：

.firstChild ：firstChild在ie下面获取的是一个元素节点，而在火狐下面获得是第一个子节点。
.firstElementChild ：所以一般都是用这个获得第一个元素节点。
所以对于获得第一个子节点，处理兼容性问题的时候：

 var oul = document.getElementById("ul");
 var node1 =  oul.firstElementChild || oul.firstChild;

获得最后一个子节点。

就把上面的first 改成last就可以了。
操作方式基本一样。

 var node2 = oul.lastElementChild || oul.lastChild;

得到兄弟节点

得到前一个兄弟节点

var node3 = oul.previousElementSibling;

得到后一个兄弟节点

var node4 = oul.nextElementSibling;

获取父节点

.parentNode ； 可以获取普通父节点。

 var oli1 = document.getElementById("li1");
 var node5 = oli1.parentNode;

获取定位父节点

.offsetParent; 获取定位父节点

    var odiv3 = document.getElementById("div3");
    var node5 = odiv3.offsetParent;

定位父级，和前面的所讲的定位父级一样。

创建和操作节点

创建和操作普通节点

---

创建普通节点

采用的是 .createElement(“li”)；
传入的参数是创建什么类型的节点。
新创建的节点 .innerHTML = xxx ； 设置他的html语句
即在< li>这里面书写的内容 < / li>

 var oliadd =  document.createElement("li");
 oliadd.innerHTML = "韦德";

---

操作普通节点

将创建好的节点放入dom树结构，默认添加在所有节点的最后。
.appendChild(newNode);
默认放在调用对象的节点最后。
传入的参数就是一个新创建的节点。或者已经有的。

插入节点：
.insertBefore(x,y);
传入两个参数：
第一个参数要加入的节点，第二个参数是放的位置，在y前面。

删除节点：
.removeChild(node);
这里传入一个参数，传入需要删除的节点。

---

创建和操作文本节点

创建文本节点

.createTextNode(“xxxx”);
创建文本节点。中间传入文本内容

var textNode = document.createTextNode(“杜兰特”);

这里提到对于文本节点提供了一个方法，可以获取文本值。

.firstChild.nodeValue

必须的是一个文本节点才行。

操作文本节点

直接操作文本：

首先获取一个文本节点：

var otext = document.getElementById("ul").firstElementChild.firstChild;

向里面添加文本：

otext.appendData("赞");

可以直接添加内容，默认找到第一个节点，放在第一个节点的后面。

向里面插入文本：

otext.insertData(3,"mm");

.insertData(num,”xx”); 方法
第一个参数是指定的位置，位置是从0开始的
第二个肯定就是插入的文本了。

删除文本：

 otext.deleteData(2,2);

.deleteData(num1,num2)；
也是两个参数。
第一个参数是从什么位置开始删除，也是从0开始
第二个是删除的长度。

替换文本：

otext.replaceData(3,2,"gg");

.replaceData(num1,num2,”xxxx”);
这里就有3个参数。
第一个参数是位置，第二个参数是长度，第三个是替换的内容

替换节点

采用的是
对象.replaceChild(node1,node2);
第一个参数是要用来替换的节点（新节点），第二个参数替换的目标节点（原节点）
eg：

/*创建一个新的li节点*/
 var oli = document.createElement("li");
 var textnode =document.createTextNode("詹姆斯");
 oli.appendChild(textnode);
/*找到要替换的节点*/    
 var oul = document.getElementById("myul");
 var lil = oul.lastElementChild;

 oul.replaceChild(oli,lil);

克隆节点

采用
对象.cloneNode(boolean);
传入一个boolean类型的值。
深克隆，值为true， 表示克隆当前的节点和子节点
浅克隆，值为false，表示只克隆当前的节点
eg：

    var newli = oli.cloneNode(true);
    oul.appendChild(newli);

下拉框的特别操作

下拉框提供了一个特殊的方法
下拉框对象.options；
可以获得所有的option。

optionss[0].text 可以直接操作option的文本

optionss[0].value 可以操作value值

下拉框特有的（构造？）方法：new option（x，x） 第一个参数是text，第二个参数是value

获取被选中的下拉框：
采用
下拉框对象.options[selectedindex];
这个方法被用在只能单选的情况下。
如果多选的话就无法采用了，还是只能进行循环判定。

---

2.属性操作

获取到所有的属性集合。

.attributes ； 可以得到
eg：

var odiv = document.getElementById("div1");
/*获取到div的所有属性,得到的是一个集合，得到的属性和设置的顺序是相反的*/
var attarr = odiv.attributes;

增加一个属性。

采用
对象..setAttribute(“属性的名字”,”属性的值”);

 odiv.setAttribute("name","test");
 odiv.setAttribute("class","na");

删除属性

采用
对象.removeAttribute(“指定属性的名字”);

odiv.removeAttribute("title");

获取到指定属性的值

采用
对象.getAttribute(“指定的属性”);

odiv.getAttribute("style");

---

其实也可以采用点操作符进行获取或者修改。
但是要求
必须是一个获取到的标签元素。
操作方式：
eg：

odiv.style = "width: 100px; height:100px ; background-color:red";

表格操作

获取到所有行

采用
表格对象.rows；
eg：

  var otable =document.getElementById("mytable");
  var ro = otable.rows; //相等于 otable.children

删除行

采用表格对象.deleteRow(i);
传入要删除的是第几行，从0开始

删除列

采用行对象.deleteCell(i);
传入要删除的是第几列，从0开始

增加行

     /*创建一行*/
     var otr = otable.insertRow(2);
     /*这里传入的参数是插在第几行，-1表示最后*/
     /*增加td，增加列 ，参数意义如法炮制*/
    var otd1 = otr.insertCell(0);
    var node = document.createTextNode("法拉利");
    otd1.appendChild(node);

     var otd2 = otr.insertCell(1);
     var node1 = document.createTextNode("法拉利1");
     otd2.appendChild(node1);

     var otd3 = otr.insertCell(2);
     var node2 = document.createTextNode("法拉利2");
     otd3.appendChild(node2);

---

表单操作

1.DOM提供了一个可以获得表单集合的方法。
操作为：

var formarr = document.forms;

即为获得当前所有的表单。

2.表单集合找到了，当需要精确找到一个表单的时候。
采用：
表单集合[下标]
或者
表单集合.[“一个值”]
这个值为：默认按照name属性找，name属性不存在 用值去匹配id找form

3.查找表单元素
可以直接通过表单.name值，查找到元素。
再通过 元素.value 属性找到值
eg：

    /*此行就为通过name值查到元素。*/
    var inp = formarr[0].username;
    /*此行就为通过value属性查到value值。*/
    console.info(inp.value);
    var opwd = formarr[0].pwd;
    console.info(opwd.value)

4.表单中单选按钮值的获取
获取单选按钮值,通过表单获取到单选按钮，直接返回被选中的按钮值。
操作方法：

/*这里即查到性别的单选按钮*/
 var radioarr = oform.sex;
 /*通过.操作符 丶value 可以直接获得当前被选中的值*/
console.info(radioarr.value);

5.多选无法直接获取，老老实实循环判断吧。
JQuery有方法直接获取。暂时还没学习。