从0到1：JavaScript快速上手（笔记二）

DOM

每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作

1. 节点类型

DOM节点共有12中类型，常用的只有3种

- 元素节点
- 属性节点
- 文本节点

 一个小测试 

• id=""wrapper"属性节点
• 一个小测试文本节点
• 一个小测试
  元素节点

不同节点的nodeType属性值

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

• 一个元素就是一个节点，这个节点称为“元素节点”。
• 属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
• 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。

2. 获取元素

在JavaScript中，我们可以通过以下6种方式来获取指定元素。

getElementById()
getElementsByTagName()
getElementsBuClassName()
querySelector()
quertSelectorAll()
getElementsByName()
document.title和document.body

2.1 getElementById()

document.getElementById('id_name')

    
        
        
        
    
    
        
JavaScript
    

2.2 getElementsByTagName()

document.getElementsByTagName('tagName')

    
        
        
        
    
    
        

            
HTML
            
CSS
            
JavaScript
            
JQuery
            
Vue.js
        
    

2.3 getElementById()和getElementsByTagName()方法的区别

• getElementById()不可以操作动态创建的DOM；getElementsByTageName()可以操作动态创建的DOM
• getElementById()获取的是1个元素，getElementsByTagName()获取的是多个元素（类数组）
• getElementById()前面只可以接document；getElementsByTageName()前面不仅可以接document，还可以接其他的DOM对象。

2.4 getElementsBuClassName()

• getElementsByClassName()方法不能操作动态DOM

    
        
        
        
    
    
        

            
 HTML 
            
 CSS 
            
 JavaScript 
            
 JQuery 
            
 Vue.js 
        
    

2.5 querySelector() 和querySelectorAll()

• querySelector()选取满足选择条件的第一个元素
• querySelectorAll()选取满足条件的所有元素
• 对于 id 选择器来说，由于页面只有一个元素，建议大家使用getElementById()，不要用querySelector()或querySelectorAll()。因为getElementById()的效率更高。

    
        
        
        
    
    
        
JavaScript
        
JavaScript
        
JavaScript
        
JavaScript
        
JavaScript

    

2.6 getElementByName()

getElementByName()只用于表单元素，一般只用于单选按钮和复选框

    
        
        
        
    
    
         本科 
         硕士 
         博士 
        
        

        
你喜欢的水果是：
    
        苹果
        香蕉
        火龙果
    

2.7 document.title和document.body

3. 创建元素

动态DOM：使用JavaScript创建的元素。这一元素一开始在HTML中不存在。

• createElement()创建一个元素节点
• createTextNode()创建一个文本节点
• 可以将元素节点和文本节点“组装”成我们平常开到的“有文本内容的元素”

var e1 = document.createElement('元素名')
var text = document.createTextNode('文本内容')
e1.appendChild(txt) // 把文本节点插入元素节点中
e2.appendChild(e1) // 把组装好的元素插入已存在的元素中

3.1 简单元素，不带属性

    
        
        
        
    
    
        

        
Hello world
    

3.2 复杂元素，带属性

4.插入元素

插入元素的两种方式：

• appendChild() 把一个新元素插入到父元素的内部子元素“末尾”
• insertBefore()将一个新元素插入到父元素中的某一个子元素“之前”

4.1 appendChild()

    
        
        
        
    
    
        

            
HTML
            
CSS
            
JavaScript
        
        

        
        
    

4.2 insertBefore()

    
        
        
        
    
    
        

            
HTML
            
Java
            
Python
        
        
        
    

5. 删除元素

使用removeChild()方法删除父元素下的某个子元素

var mBtn2 = document.getElementById('deleteBtn')
    mBtn2.onclick = function () 
    {
        // 获取 ul 元素
        var mUl = document.getElementById('list')
        // 删除 最后一个 元素
        mUl.removeChild(mUl.lastElementChild)
        
        // 删除整个 ul 元素
        document.body.removeChild(mUl)
    }

6. 复制元素

使用cloneNode()方法来实现复制元素

    mBtn.onclick = function () 
    {
        console.log("01")
        // 获取 ul 元素
        var mUl = document.getElementById('list')
        var mUlNew = mUl.cloneNode(1)
        // var mUlNew = mUl.cloneNode(0)
        document.body.appendChild(mUlNew)
    }
            

DOM进阶

1. HTML属性操作

在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”，另外一种是使用“对象方法”

obj.attr,obj是元素名，通过之前方法获取元素；attr是属性名，通过点运算符来获取它的属性。

在实际开发中，在更多的情况下，我们要获取的是表单元素的值。其中文本框、单选按钮、复选框、下拉列表中的值，都是通过value属性来获取的。

    
        
        
        
    
    
        

            
            

            
            

        
        

            苹果
            梨
            西瓜
            

            
            

        

        

            华为
            苹果
            三星
            

            
        
    

HTML元素的属性值同样也是通过属性名来设置的

• obj.attr = ' value '
• setAttribute()

通过“对象方法”来操作HTML属性

• getAttribute()
• setAttribute()
• removeAttribute()
• hasAttribute()

对于自定义的属性（用户自定义的而不是元素自带的属性），此时我们不能使用“对象属性”的方式获取，只能用“对象方法”的方式获取。

removeAttribue()属性在更多情况下是结果class属性来整体控制元素样式的属性。

    
        
        
        
        
    
    
        
你偷走了我的影子，无论你在哪里，我都会一致乡镇你
        
        
    

2. CSS属性操作

• 获取CSS属性值
  • getComputedStyle(obj).attr
  • obj元素名
  • attr: “驼峰”命名法明明的CSS属性名
    • CSS3中的-webkit-box-shadow写成webkitBoxShadow
  • 支持Google、Firefox和IE9及以上的浏览器，不支持IE6、IE7和IE8
    • IE6、IE7和IE8以上使用currentStyle

• 设置CSS属性值
  • 使用style对象来设置一个CSS属性的值。在元素的style属性中添加样式，这种方法设置的是“行内样式”。
    • obj.style.attr = 'value'
    • attr采用驼峰型命名法
  • 在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性中添加的。
    • 不再使用“驼峰”命名法，使用CSS平常写法

    
        
        
        
        
    
    
        

        属性名称：
        

        属性值：
        

        
    

3.DOM遍历

• 查找父元素

  • obj.parentNode

  • 
    
        
            
            
            
            
        
        
            
    
                
    考试成绩
                
    
                    
    小明
                    
    80
                    
    80
                    
    80
                
                
    
                    
    小红
                    
    90
                    
    90
                    
    90
                
                
    
                    
    小工
                    
    98
                    
    98
                    
    98
                
            
        
        
    
    
    
    

• 查找子元素

  • chaildNodes, firstChild, lastChild

    • childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的

  • children, firstElementChild,lastElementChild

    • children获取的是所有的元素节点，不包括文本节点

  • 
    
        
            
            
            
        
        
            
    
                
    HTML
                
    CSS
                
    JavaScript
            
    
            
    
            
    
                
    JQuery
                
    HTML
                
    CSS
                
    JavaScript
                
    Vue.js
            
            
    
            
            
        
    
    

• 查找兄弟元素

  • previousSibling 前一个兄弟节点， nextSibling下一个兄弟节点
    • 包含文档节点（一般为空白节点）
  • previousElementSibling前一个兄弟节点，nextElementSibling下一个兄弟节点
    • 不包含文档节点

innerHTML和innerText

可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

    
    
    
    


    
这是一个测试
    innerHTML中的内容是:  

    innerText中的内容是:  

**innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。