image.png

1. 元素对象，Element对象

要操作element对象，首先要获取到element，使用document里面相应的方法获取

• 方法：
  获取属性里面的值
  getAttribute("属性名称")

var input1 = document.getElementById("inputid");
alert(input1.getAttibute("value");

设置属性的值
input.setAttrbute("class","haha");
删除属性
input1.removeAttibute("name");
⚠️：不能删除value

想要获取标签下面的子标签
使用属性childNodes,但是这个属性兼容性不强
获得标签下面子标签的唯一方法是使用getElementsByTagName方法

var ul = document.getElementById("ulid");
//获取ul下面的子标签
//var lis = ul.childNodes;
//alert(lis.length);
var lis = ul.getElementsByTagName("li");
alert(lis.length);

---

3. Node对象属性

nodeName
nodeType
nodeValue

• 标签节点对应的值：

nodeName：1
nodeType：大写标签名称 eg：SPAN
nodeValue：null

• 属性节点对应的值：

nodeName：2
nodeType：属性名称
nodeValue：属性的值

• 文本节点对应的值：

nodeName：3
nodeType：#text
nodeValue：文本内容

---

4. Node对象的属性二

<ul>
  <li id="li1">1111</li>
  <li id="li2">222</li>
  <li id="li3">222</li>
  <li id="li4">222</li>

• 父节点
  ul是li的父节点

• 字节点：
  li是ui的字节点
  childNodes:得到所有字节点，但是兼容性差
  firstChild：获取第一个字节点

var ul1 = document.getElementById("ulid");
var li1 = ul1.firstChild;
alert(li1.id)

lastChild:获取最后一个字节点

• 同辈节点
  li直接关系是同辈节点
  nextSibling:返回一个给定节点的下一个兄弟节点
  previousSibling:返回一个给定节点的上一个兄弟节点

var li3 = document.getElementById("li3");
alert(li3.previousSibling.id);

---

5. 操作dom树

• appendChlid方法
  添加节点到末尾
  特点：类似于剪切粘贴的效果

• insertBefore(newNode,oleNode)方法
  在某个节点之前添加一个新的节点
  两个参数：要插入的节点，在谁之前插入
  插入一个节点，节点不存在，创建：
  1.创建标签 createElement
  2.创建文本 createTextNode
  3.把文本添加到标签下面 InsertBefore

• 删除节点：removeChlid方法：删除节点，通过父节点删除，不能自己删除自己
  1.获取标签 document.getElementById("id名称")；
  2.获取父节点标签 document.getElementById("父节点名称")；
  3.执行删除（通过父节点删除）父节点对象.removeChlid(子节点对象）；

• 替换节点：replaceChlid(newNode,oldNode)方法
  两个参数：新的节点（替换成的节点），被替换的节点
  同样不能自己替换自己，需要通过父节点来替换

• 复制节点:cloneNode(boolean)

//把ul列表复制到另外一个div里面去
/*1.获取到ul
2.执行复制方法cloneNode方法复制true
3.把复制之后的内容放到div里面去
获取div
appendchild方法*/
var ul = document.getElementById("ulid");
var ulcopy = ul.cloneNode(true);
var div = document.getElementById("divid");
div.appendchild(ulcopy);

• 查找节点：

getElementById()：通过id属性，查找节点
getElementsByName():通过节点的name属性，查找节点
getElementsByTagName():通过节点的标签，查找节点

• 插入节点：

appendChild()方法：添加节点到末尾，相当于剪贴
insertBefore()方法：添加节点到某个节点之后

• 替换节点:

replaceChild()方法：通过父节点替换

• 删除节点：

removeChild()方法：通过父节点删除

---

6.innerHTML属性

• 不是dom的组成部分，但是大部分浏览器都支持
  作用一：获取文本内容
  作用二：向标签中设置内容（可以是html代码）

向div中添加一个表格

var tab = "<table border = '1'><tr><td>aaaa</td></tr>
<tr><td>bbb</td></tr><tr><td>ccc</td></tr></table>"

var tab = "<table>";
tab += "</table>";//相当于var tab = "<table></table>";