JS操作html元素的一些方法

========================================== 获取一个节点 =======================================

document.getElementById()          返回对拥有指定 id 的第一个对象的引用。

 

document.getElementsByName()       返回带有指定名称的对象集合。

 

document.getElementsByTagName()    返回带有指定标签名的对象集合。

 

document.documentElement           返回html的根节点

 

document.body                      返回html的根节点，与document.documentElement 类似

 

以上的方法，同样适用与某一个节点(obj.getElementByName(); 获取obj节点符合条件的节点对象)

 

======================= 下面是查询一个节点的子节点、父节点的一些属性 ==============

 

obj.parentNode                     获取父节点对象

 

obj.childNodes                     获取所有的子节点对象

 

obj.firstChild                     获取第一个子节点

 

obj.lastChild                      获取最后一个子节点

 

============================= 下面是操作节点自身的一些属性 =================================

 

obj.nodeName                       返回节点的名称，全大写方式, 适用于节点类型未知.

 

obj.nodeValue                      返回节点值

 

obj.value                          返回节点值，与obj.nodeValue 类似

 

obj.src                            获取元素的src属性值，一般适用于<img>元素

 

obj.href                           获取元素的href属性值，一般适用于<a>元素

 

obj.innerHTML                      得到标签中间的文本

 

============================ 操作元素样式的一些方法示例 ====================================

 

obj.style.color = "red";           相当于<p style="color:red;">text</p>

 

obj.style.backgroundColor = "silver";  设置背景色

 

obj.style.fontSize = 30;           设置字体大小

 

Obj.className = "s1";              设置元素的样式

 

====================================== 创建一个节点的方法 =================================

 

创建节点：document.createElement("a");

设置属性：obj.href ="..."; obj.innerHTML = "...";

插入页面：XXXX.appendChild(obj); <!-- 作为XXXX节点的最后一个子节点插入 -->

          XXXX.insertBefore(obj,oldChild); <!-- 作为XXXX的子节点插入，插入到oldChild子节点的前面 -->

 

===================================== 删除一个节点的方法 ==================================

 

xxx.removeChild(obj); <!-- obj必须是xxx的子节点 -->

 

obj.parentNode.removeChild(obj); <!-- 删除obj自身 -->