客户端网页编程07——JS

客户端网页编程07——JS

DOM（Document of Model）

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);

操作DOM树

节点：

文档节点：Document-根节点

元素节点：Element   返回值是1

文本节点：text  返回值是3

属性节点：attr  返回值是2

操作节点：

创建节点：var oli2 = docment.createElement("li")；

                    oli.innerHTML ="内容"；

将创建的节点放入dom树结构：

                    oul.appendChild(oli2)；//默认添加到所有节点的最后

                    oul.inserBefor(oli2，oli1)；//添加的节点名称，放在哪个节点后面