JS中DOM及增删改查

1.使用DOM获取元素

1.getElementById(id) 通过元素id名获取元素

例：获取id名为box的元素
document.getElementById(“box”);

2.getElementsByTagName 通过标签名获取元素列表（数组）

例：获取所有的li标签
document.getElementsByTagName(‘li’);
获取所有的标签
document.getElementsByTagName(“*”);
ie9以下会多出节点 会被当成是一个节点

3.getElementsByName 通过元素name属性值获取元素列表（数组）

name属性常被定义在哪些元素中：
form,input,select,textarea,a,button,img…
例：获取name属性值

var name1=document.getElementsByName(“haha”);
获取input value值：name1.value
单选/复选框是否被选中：ipt.checked 对象名.属性名 获取当前对象是否被选中

2.DOM中节点对象的常用属性和方法

1 获取标签名

节点对象.tagName

2 获取或设置元素的内容

节点对象.innerHTML

2.1、innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

2.2、innerText:

从起始位置到终止位置的内容, 但它去除Html标签

3 获取或设置元素的value值

节点对象.value

4 获取所有子节点——数组结构，包含空节点

节点对象.childNodes 或者 节点对象.children

4.1、childNodes：获取节点，不同浏览器表现不同；

IE：只获取元素节点；
非IE：获取元素节点与文本节点；
解决方案：if(childNode.nodeName==”#text”) continue 或者 if(childNode.nodeType != ‘3’) continue

4.2、children：获取元素节点，浏览器表现相同。

因此建议使用children

5 获取节点的节点名

节点对象.nodeName

6 获取节点的父节点

节点对象.parentNode

7 删除子节点

父节点对象.removeChild(子节点);

8 元素显示和隐藏有两种方式：

8.1 占位隐藏

元素对象.style.visibility
隐藏：hidden
显示：visible

8.2 不占位隐藏

元素对象.style.display
隐藏：none
显示：block

3.使用DOM对元素进行增删改查操作3.使用DOM对元素进行增删改查操作

一、【节点的查询】

1.所有子节点集合

节点对象.childNodes;

2.第一个子节点

节点对象.firstChild;
节点对象.childNodes[0]

3.最后一个子节点

节点对象.lastChild;
节点对象.childNodes[长度-1]

二、节点的新增

1.创建新节点：

var node=document.createElement(“标签名”);
返回值：返回一个新的节点对象

2.追加子节点：在最后一个子节点后追加节点

父节点.appendChild(子节点);

3.插入子节点：在指定的子节点前插入新节点

父节点.insertBefore(新节点,子节点);

三、节点的修改将指定的子节点修改为新节点
父节点.replaceChild(新节点,子节点);

四、点的克隆
节点对象.cloneNode(布尔类型数据)
参数：
true：克隆节点本身和所有子节点
false：克隆节点本身
返回值：克隆的新节点

五、节点的删除
删除子节点：删除父节点对应的子节点
父节点对象.removeChild(子节点);