原生JS学习笔记（二）

朱雀 2022-02-13 18:59 214阅读 0赞

## 节点属性 ##

*1、利用document获取元素，如[本人博客介绍获取元素的方法][Link 1]*  
根据 DOM，HTML 文档中的每个成分都是一个节点。HTML为根节点。

DOM (Document Object Model)是这样规定的：

> **整个文档是一个文档节点  
> 每个 HTML 标签是一个元素节点  
> 包含在 HTML 元素中的文本是文本节点  
> 每一个 HTML 属性是一个属性节点  
> 注释属于注释节点**

但是这种方法的**劣势**：

>  *  浪费内存
>  *  逻辑性不强

*2、使用本节要讲得节点属性来获取*

> 		对象.parentNode  获得父节点的引用
    >       对象.childNodes  获得子节点的集合
    >       对象.firstChild  获得第一个子节点
    >       对象.lastChild   获得最后一个子节点
    >       对象.nextSibling 获得下一个兄弟节点的引用
    >       对象.previousSibling 获得上一个兄弟节点的引用

**您知道它的劣势吗？**

*  兼容性差

> parentNode 父节点  
> childNodes 所有子节点（含文本节点）  
> firstChild 第一个子节点（含文本节点）  
> lastChild 最后一个子节点（含文本节点）  
> nextSibling 下一个兄弟节点（含文本节点）  
> previoursSibling 前一个兄弟节点（含文本节点）  
> nodeType 节点类型。

>  - 9为   document节点，
    		>  - 1为  element节点，
    		>  - 3代表 text节点，
    		>  - 8代表 comment节点，
    		>  - 11代表 documentFragment节点

> nodeValue 当前节点为 文本节点时的文本内容  
> nodeName 节点的标签名。（文本节点为\#text）

--------------------

## 元素节点操作 ##

> getAttribute() 获取节点的属性，返回元素节点的指定属性值。  
> setAttribute() 设置节点的属性，把指定属性设置或更改为指定值。  
> hasAttribute() 如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false。  
> removeAttribute() 从元素中移除指定属性。  
> id  
> className 通过class获得元素  
> textContent 非IE，获得该节点内的所有子节点（包含文本节点）的文字信息，所有标签信息会被去掉。IE下为undefined.  
> innerText IE专属，获得该节点内的所有子节点（包含文本节点）的文字信息。所有标签信息会被去掉。  
> outerText IE专属，获得该节点和所有子节点点（包含文本节点）的文字信息。同上。  
> innerHTML 获得该节点内所有子节点的html信息。  
> outerHTML 获得该节点和所有子节点的html信息。  
> 节点的CSS属性通过style来修改，所有CSS中用-连接的CSS属性都变成驼峰式直接修改。例如：document.getElementById(‘test’).style.backgroundColor = ‘\#ccc’。  
> innerHTML, outerHTML, innerText, outerText属性的区别

事件document.addEventListener(“DOMContentLoaded”, function()  
Unknown macro: \{// Code\}  
, false);

<a href="#" target="_blank">Attr 对象</a>，
    
    <p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>
    
    <button onclick="myFunction()">试一下</button>
    
    <script> function myFunction() { var a=document.getElementsByTagName("a")[0]; document.getElementById("demo").innerHTML=a.getAttribute("target"); } </script>

浏览器结果如下：  
![没有点击按钮之前][20190428161749143.png]  
![点击按钮之后][20190428161806263.png]

--------------------

<input value="OK">
    
    <p id="demo">点击按钮来设置按钮的 type 属性。</p>
    
    <button onclick="myFunction()">试一下</button>
    
    <script> function myFunction() { document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); } </script>
    
    <p>Internet Explorer 8 以及更早的版本不支持此方法。</p>

--------------------

<p id="demo">请点击按钮来查看 button 元素是否拥有 onclick 属性。</p>
    
    <button onclick="myFunction()">试一下</button>
    
    <script> function myFunction() { var btn=document.getElementsByTagName("button")[0]; var x=document.getElementById("demo"); x.innerHTML=btn.hasAttribute("onclick"); } </script>
    
    <p>Internet Explorer 8 以及更早的版本不支持该方法。</p>

--------------------

参考：[javascript-节点属性详解][javascript-]  
[W3C中对JS DOM Element 对象操作][W3C_JS DOM Element]

[Link 1]: https://shangrila-xiu.github.io/2019/04/25/javascript%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%B9%E6%B3%95/#more
[20190428161749143.png]: /images/20220213/1416d0f3127e453e862f0ff498fb2aac.png
[20190428161806263.png]: /images/20220213/f479b5c68c644af0afd3e2aa094b837c.png
[javascript-]: https://www.cnblogs.com/wangjie-01/p/4652549.html
[W3C_JS DOM Element]: http://www.w3school.com.cn/jsref/dom_obj_all.asp