javaScript DOM编程艺术的美术馆效果（getAttribute、setAttribute、childNodes属性、 nodeType简单运用）、属性包含特性

淡淡的烟草味﹌ 2022-03-12 13:51 144阅读 0赞

源码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1][]

### childNodes属性小例子 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 2][]

## ##

### nodeType简单运用 ###

**注意：nodeType属性值一共有12种**

**常用的是：**

*  **元素节点的nodeType属性值是1**
 *  **属性节点的nodeType属性值是2**
 *  **文本节点的nodeType属性值是3**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 3][]

### 属性包含特性： ###

<body>
     <input type="text" name="属性包含特性" class="" value="" data="" xyz="xyz&&lm">
    </body>
    
    <script>
      /*
         属性特性
            特性天生就可以具有的如 id type class value checked  有映射关系 js对象->html标签
            属性包含特性  非特性的属性 data xyz等等    无映射关系 js对象->html标签
            setAttribute getAttribute 是属性就能赋值
            jq源码  attr prop底层原理就是这个
      */
       const input = document.getElementsByTagName("input")[0]
       console.log(input.type)//text
       console.log(input.xyz)//undefined
       //如果你一定要给input添加新的属性，并且可以获取到这个属性值，那就使用setAttribute和getAttribute
       input.setAttribute('newxyz', 'newXyz&&lm')
       console.log(input)//<input type="text" name="属性包含特性" class="" value="" data="" xyz="xyz&&lm">
       console.log(input.getAttribute('newxyz'))//newXyz&&lm
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]: /images/20220312/e9d14ab9cf2d4f6785e53e806dce7b68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1]: /images/20220312/0259e67cc8724e698381401847cfdc15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 2]: /images/20220312/b4c988dbf60744ea90985804ff82cf7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 3]: /images/20220312/01eb4dbeb3264d72907d3206aff146ed.png