4-1 DOM节点

1.增

 <button onclick="add();">添加节点</button>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var num =4
        function add(){
        //1.创建节点
        var $li = document.createElement('li')
        $li.innerText = num++
        //把节点插入ul里
        var $list = document.querySelector('#list')
        $list.appendChild($li)
 }
    </script>

2.删

<button onclick="remove();">删除节点</button>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
       function remove(){
        var $list = document.querySelector('#list')
        $list.remove()
       }

3.改

3.1样式修改

<button onclick="show();">显示</button>
    <ul id="list" class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
                     <!-- 第一种方法 -->
    <!-- <script>
         var $list= document.querySelector('#list')
          var $button = document.querySelector('button')
        function show(){
        var flag =$list.style.display
        if(flag === 'none'){
            $list.style.display = 'block'
            $button.innerText = '隐藏'
        }else{
            $list.style.display = 'none'
            $button.innerText = '显示'
        }
 } -->
</script>
                    <!-- 第二种方法 -->
 <script>
        function show() {
            var $box = document.querySelector('.box');
            var $button = document.querySelector('button');
            var className = $box.className;
            if (className === 'box') {
                $box.className = 'box dsn';
                $button.innerText = '隐藏';
            } else {
                $box.className = 'box';
                $button.innerText = '显示';
            }
        }

3.2属性修改

<button onclick="show(1);">显示1</button>
    <button onclick="show(2);">显示2</button>
    <div class="box">
    </div>
    <img src="" alt="">
    <script>
        function show(num){
            document.querySelector('img').src =`./DOM${num}.jpg`;
        }

4.查

<div id="app">
    </div>
        <ul>
            <li class="itme"></li>
            <li class="itme"></li>
            <li class="itme"></li>
            <li class="itme"></li>
            <li class="itme"></li>
        </ul>
        <a href="http://www.baidu.com">百度</a>
        <div id="ap">
            <div>aaaaa
                <p>sssss</p>
            </div>
        </div>
    <script>
       // document.getElementById    //id只能有一个，获取id
       // document.querySelector    //只能选择一个
        //document.querySelectorAll   获取所有
        var $app = document.querySelector('#app')
       var $itme =document.querySelector('.itme')
       var  $itme = document.querySelectorAll('.itme')
        //获取a标签href的属性
        var $a = document.querySelector('a')
        console.log($a.href)
        //获取样式  驼峰式
        console.log($a.style.fontSize); 
       // 获取css样式
       console.log(window.getComputedStyle($a,null).color);
        //获取内容
        var $ap = document.querySelector('#ap')
        //获取所有
        console.log($ap.innerHTML)
        //只获取文本
        console.log($ap.innerText)
         </script>