search

Home >Web Front-end >JS Tutorial >DOM node operation usage in JavaScript (source code)

DOM node operation usage in JavaScript (source code)

云罗郡主
云罗郡主forward
2018-10-18 13:48:422328browse

The content this article brings to you is about the usage of DOM node operations in JavaScript (source code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

DOM node operation usage in JavaScript (source code)

How to create a node

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

Some usage of nodes 

例：<body>你好</body>
1. nodeValue用法  //一般用于文本节点

2. nodeName usage // Generally used for element nodes, the returned element names are all uppercase letters

##document. body.nodeName //BODY

How to obtain attribute nodes: 

①document.body.getAttributeNode("属性名")
②document.body.attributes[0] //获取body中的第一个属性节点

Text nodes use nodeName to return #text

3. nodeType usage (Commonly used) node types: 

元素节点   1 
    
属性节点   2  
文本节点  3   
注释      8   
 文档      9   （即document.nodeType返回9）

Attribute operation

⑴对象.setAttribute(&#39;属性名&#39;,&#39;属性值&#39;);
 ⑵对象.className = &#39;属性名&#39;;
 ⑶var attr = document.createAttribute(&#39;属性名&#39;);
    attr.nodeValue = &#39;属性值&#39;;
    对象.setAttributeNode(attr);

2. Delete attributes

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

The above is the complete introduction, if you want to know more about

JavaScript video tutorial , please pay attention to the PHP Chinese website.

The above is the detailed content of DOM node operation usage in JavaScript (source code). For more information, please follow other related articles on the PHP Chinese website!

php JavaScript dom
Statement：
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete
Previous article：Take you to further understand js closures (details)Next article：Take you to further understand js closures (details)

Related articles

See more