JavaScript中的DOM节点操作-蒲公英云

JavaScript中的DOM节点操作

创建一个节点的方法

1. document.createElement()  //创建元素节点
2. document.createTextNode() //创建文本节点
3. document.createAttribute() //创建属性节点
4. cloneNode()
使用方法：被克隆的节点对象.cloneNode(value); 
value 值为false（默认）或true，false表示只克隆节点及其属性，true表示克隆节点及其属性以及其后代。

关于节点的一些用法

例：<body>你好</body>
1. nodeValue用法  //一般用于文本节点
document.body.firstChild.nodeValue //你好
document.body.nodeValue  //null
2. nodeName用法 //一般用于元素节点，返回的元素名称均为大写字母
document.body.nodeName //BODY
属性节点的获取方式：
①document.body.getAttributeNode("属性名")
②document.body.attributes[0] //获取body中的第一个属性节点
文本节点使用nodeName返回#text
3. nodeType用法
  （常用）节点类型：
    1. 元素节点   1 
    2. 属性节点   2
    3. 文本节点   3
    4. 注释      8
    5. 文档      9   （即document.nodeType返回9）

属性操作

1. 添加属性
⑴对象.setAttribute('属性名','属性值');
    ⑵对象.className = '属性名';
    ⑶var attr = document.createAttribute('属性名');
    attr.nodeValue = '属性值';
    对象.setAttributeNode(attr);
2.删除属性
⑴对象.removeAttribute('属性名');
    ⑵var attr = 对象.getAttributeNode('属性名');
    对象.removeAttributeNode(attr);
    附：getAttribute('属性名')返回属性值。
    ⑶针对于input标签中的checkbox可使用：
    对象.checked = false 使其不被选中；
    附：设置对象.checked = value时，应直接将value的值
    设为true或false，如果将value设置为一个字符串，
    会将该字符串转化为boolean类型再赋值，会消耗性能。