DOM文档对象模型

<h2 id="title" class="c1">内容</h2>

        DOM文档对象模型
           =>  使用javascript 代码操作  操作html标签元素属性、样式、内容的能力

        文档对象document
           
        操作元素内容 
            1. 获取元素
                如何获取元素
            2. 更改元素内容 

        如何获取元素
            getElement系列
                getElementById()
                getElementsByClassName
                getElementsByTagName
                getElementsByName
            queryselector()
                queryselector() 
                queryselectorAll()


        伪数组
          相同点： length属性
                可以通过索引号访问
           区别： 不能使用 push pop ...

       

     -->

<h2 id="title1">id获取元素</h2>
    <div class="c1">className类名获取元素1</div>
    <div class="c1">className类名获取元素2</div>
    <input type="text" name="username">
    <input type="text" name="password">

    <ul>
        <li>元素一</li>
        <li>元素二 </li>
        <li>元素三</li>
    </ul>


    <script>
        var box = document.getElementById('title1') //获取html元素 节点对象
        console.log(box);

        var arr = ['div1', 'div2']
        console.log(arr);

        var boxs = document.getElementsByClassName('c1')
        console.log(boxs);

        var box2 = document.getElementsByTagName('div')
        console.log(box2);

        var box3 = document.getElementsByName('username')
        console.log(box3);

        var h2 = document.querySelector('#title1')
        var c1 = document.querySelector('.c1')
        var c1s = document.querySelectorAll('.c1')

        var usernameInput = document.querySelector('input[name="username"]')

        var firstLi =  document.querySelector('ul li:nth-child(1)')

        console.log(firstLi);

 <!-- 
        操作元素内容
           1. 获取元素
           2. 操作内容  
               获取内容  divEle. 
               改变内容   divEle.innerHTM = '新内容'

                区别： 
               innerText 纯文本内容      内容
               innerHTML  html标签内容  <span>内容</span>
               
               value 表单内容

<div id="d1" class="c1">dom学习</div>
    <input type="text" name="username" value="root">

    <script>
        var divEle = document.querySelector('#d1')
        // var content = divEle.innerHTML
        var content = divEle.innerText
        console.log(content);

        divEle.innerHTML = '<h2>操作元素内容很简单</h2>'
        // divEle.innerText = '<h2>操作元素内容很简单111</h2>'

        var inputEle = document.querySelector('input[name="username"]')
        // inputEle.value = 'admin'

        console.log('inputEle.value :',inputEle.value);