JavaScript中的DOM节点操作

最新推荐文章于 2023-05-11 11:05:57 发布

qinchao888

最新推荐文章于 2023-05-11 11:05:57 发布

阅读量411

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/GreyBearChao/article/details/73522277

版权

javascript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

创建一个节点的方法

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类型再赋值，会消耗性能。