daily commit

javascript/dom.md

@@ -1,61 +1,61 @@
-# dom
-- ## js中dom模型的简介
-  - js的dom中常用对象：
-    - window：浏览器用来载入页面的tab，通过js中的window对象，用户可以通过调用window对象中的方法完成如下操作：
-      - 返回窗口大小
-      - 操作导入window中的document
-      - 存储特定页面的数据
-      - 在当前document中添加handler
-    - navigator：可以通过该对象来检索浏览器的状态和身份信息
-    - document：代表载入window的html文档
-  - dom树形结构：
-    - root node：在dom树结构中，根节点总是html节点
-    - 子节点：直接位于另一个节点内的节点
-    - 后代节点：如果一个节点位于另一个节点内，不管是直接位于还是间接被包含
-    - 父节点：如果一个节点直接包含另一个节点
-    - 兄弟节点：如果两个节点位于dom树中的同一层，并且具有相同的父节点，那么他们就是兄弟节点
-- ## document api查找节点元素
-  - querySelector：
-    - document.querySelector()会返回第一个匹配的元素
-        ```javascript
-        document.querySelector("p")
-        ```
-  - querySelector:
-    - 返回所有满足条件的元素，按照NodeList的形式返回
-        ```javascript
-        document.querySelectorAll("p")
-        ```
-- ## document api创建新元素
-  - document.createElement:
-    ```javascript
-    let node=document.createElement('p')
-    let p_node=document.querySelector('p')
-    p_node.apendChild(node)
-    ```
-  - node.appendChild:通过该方法可以为节点插入新的子元素
-  - document.createTextNode：创建新的文本节点（类似与#text的子节点）
-- ## document api 移除元素
-  - parentNode.removeChild：移除子元素
-    ```javascript
-    let par_node=document.querySelector("div")
-    let child_node=document.querySelector("div > p")
-    par_node.removeChild(child_node)
-    ```
-  - childNode.remove:对子元素可以直接调用remove
-    ```javascript
-    let child_node=document.querySelector("div > p")
-    child_node 
-    ```
-- ## js修改css样式
-  - 可以通过修改HTMLElement.style中的属性来通过js修改html页面中元素的样式，其会通过inline style（html元素的style属性）来修改页面样式
-    ```javascript
-    let node=document.querySelector("p")
-    node.style.background="grey"
-    ```
-  - 除了可以通过修改inline style来动态修改元素属性外，还可以预先在css中为各个class指定样式，然后在运行时动态的通过js来修改元素的class属性，此时会为元素应用不同的样式
-    ```javascript
-    let node=document.querySelector("p")
-    node.setAttribute('class','white-style')
-    ```
-  
-
+# dom
+- ## js中dom模型的简介
+  - js的dom中常用对象：
+    - window：浏览器用来载入页面的tab，通过js中的window对象，用户可以通过调用window对象中的方法完成如下操作：
+      - 返回窗口大小
+      - 操作导入window中的document
+      - 存储特定页面的数据
+      - 在当前document中添加handler
+    - navigator：可以通过该对象来检索浏览器的状态和身份信息
+    - document：代表载入window的html文档
+  - dom树形结构：
+    - root node：在dom树结构中，根节点总是html节点
+    - 子节点：直接位于另一个节点内的节点
+    - 后代节点：如果一个节点位于另一个节点内，不管是直接位于还是间接被包含
+    - 父节点：如果一个节点直接包含另一个节点
+    - 兄弟节点：如果两个节点位于dom树中的同一层，并且具有相同的父节点，那么他们就是兄弟节点
+- ## document api查找节点元素
+  - querySelector：
+    - document.querySelector()会返回第一个匹配的元素
+        ```javascript
+        document.querySelector("p")
+        ```
+  - querySelector:
+    - 返回所有满足条件的元素，按照NodeList的形式返回
+        ```javascript
+        document.querySelectorAll("p")
+        ```
+- ## document api创建新元素
+  - document.createElement:
+    ```javascript
+    let node=document.createElement('p')
+    let p_node=document.querySelector('p')
+    p_node.apendChild(node)
+    ```
+  - node.appendChild:通过该方法可以为节点插入新的子元素
+  - document.createTextNode：创建新的文本节点（类似与#text的子节点）
+- ## document api 移除元素
+  - parentNode.removeChild：移除子元素
+    ```javascript
+    let par_node=document.querySelector("div")
+    let child_node=document.querySelector("div > p")
+    par_node.removeChild(child_node)
+    ```
+  - childNode.remove:对子元素可以直接调用remove
+    ```javascript
+    let child_node=document.querySelector("div > p")
+    child_node 
+    ```
+- ## js修改css样式
+  - 可以通过修改HTMLElement.style中的属性来通过js修改html页面中元素的样式，其会通过inline style（html元素的style属性）来修改页面样式
+    ```javascript
+    let node=document.querySelector("p")
+    node.style.background="grey"
+    ```
+  - 除了可以通过修改inline style来动态修改元素属性外，还可以预先在css中为各个class指定样式，然后在运行时动态的通过js来修改元素的class属性，此时会为元素应用不同的样式
+    ```javascript
+    let node=document.querySelector("p")
+    node.setAttribute('class','white-style')
+    ```
+  
+