6月28日实训博客（js的dom样式）

1.DOM基础：

 <div id="dom1">我是DOM</div>

    <div class="dom2">我是DOM2</div>

    <div class="dom3">我是DOM3</div>

    <!-- 通过id属性获取对象 -->

    <script>

     /*  document.getElementById('dom1') */

     /* 通过标签名获取对象 */

     console.log(document.getElementsByTagName('div')[2]);

     /* 获取是集合 */

     /* 可通过下标来获取 */

     console.log(document.getElementsByClassName('dom2'));

     /* 通过querySelector获取含有指定class选择器的元素，含有相同class元素很多但是只获取第一个 */

     document.querySelector('.class')

     document.querySelector('#dom2')

     console.log(document.querySelectorAll);

     /* 获取一个集合 */

    </script>

2.操作DOM:

<button οnclick="fn()">点我试试</button>

    <div id="dom1"><img datasrc=""></div>

    <script>

        /* 按钮点击玩之后，整个文档会被修改 */

        function fn(){

            /* document.getElementById('dom1').innerHTML = '平安夜平安'; */

            /* 直接写dom1也可以获取但是不推荐 */

            /* dom1.innerHTML = 'HELLO' */

            /* innerHTMl会替换原来的内容 */

            /* let d = document.getElementById('dom1');

            d.innerHTML = "<h1>hello</h1>" */

            /* innerText只会把文字显示在对应区域，不会转义标签元素 */

            /* document.querySelector('#dom1').innerText = '123456' */

            /* 使用document.querySelector可以使用后代选择器 */

            /* 宽高不可以使用px */

        let img =  document.querySelector('#dom1 img').src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F12%2F20190112211236_PLfRe.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642904320&t=f3555475d062adc7fc0042367b842373'

        }

        console.log(img.src);

        document.querySelector('#dom1 img').width = '200'

        document.querySelector('#dom1 img').height = '200'

        img.datasrc = '123'

        /* dom元素设置值只能设置自身本来就有的属性 */

    </script>

操作DOM练习：

<button οnclick="fn()">点我</button>

    <h1 id="qd">前端 </h1>

    <h1 id="qd">前端 </h1>

    <h1 id="qd">前端 </h1>

    <script>

        function fn(){

        /* let q = document.getElementsByClassName('qd') */

        /* 通过集合方式修改不了 */

        let q = document.getElementsByClassName('qd');

        for(var i=0;i<=q.length;i++){

            q[i].innerHTML = '<h1>das </h1>'

        }

        let q = document.getElementById('qd');

        q.innerHTML = '<h2>前端 yyds</h2>'

        }

    </script>

3.DOM样式：

    <div id="app" style="background-color: red;">

    </div>

    <script>

        let div = document.getElementById('app');

        /* div含有style行内样式属性

        所以需要在style上写宽高属性 在style上填写宽高必须要加上单位px */

        div.style.width = '200px'

        div.style.height = '200px'

        div.style.marginTop = '100px'

        /* 带-要用驼峰命名法 */

        /* %是相对于父元素而设置的 */

        /* px是物理元素，是相对于屏幕而言 */

        /* div.style.width = '10%'

        div.style.height = '10%' */

        /* div元素自身没有width和height属性，所以不能直接设置 */

        /* div.width = '200'

        div.height = '200' */

    </script>

DOM样式练习：

<!-- 有一个div width50px height 是50px 蓝色 点击这个div 宽高 都调整100*100

    点击后变红色 -->

    <div id="a" style="width: 50px; height: 50px; background-color: blueviolet;" οnclick="fn()"></div>

    <script>

         function fn(){

        let div = document.getElementById('a');

        div.style.width = '100px'

        div.style.height = '100px'

        div.style.background = 'red'

        div.style.transition = 'all 2s linear 0.5s';

        }

    </script>

4.DOM节点属性：

<div>

        <h1>我是h1</h1>

        <ul>

            <li>我是li</li>

        </ul>

        <h2>我是h2</h2>

    </div>

    <script>

        /* let li = document.querySelector('li') */

        /* 返回父节点是ul */

        /* console.log(li.parentNode); */

        let div = document.querySelector('div');

        /* 只返回子节点 如果存在空格或者换行也会被算成一个子节点 */

        console.log(div.childNodes);

        /* 获得ul */

        /* div.childNodes[3] */

        console.log(div.firstChild);

        /* 返回第一个子节点 */

        console.log(div.lastChild);

        /* 返回最后一个子节点 */

        console.log(div.firstChild.nextSibling);

        /* 下一个子节点 */

        console.log(div.lastChild.previousSibling);

        /* 上一个子节点 */

        console.log(div.firstElementChild);

        /* 返回节点的第一个子节点，高版本的浏览器才能识别

        Element忽略空格和换行直接获取元素节点 */

    </script>

<div>

        <h1>我是h1</h1>

        <ul>

            <li>我是li</li>

        </ul>

        <h2>我是h2</h2>

    </div>

    <script>

         /* <!--练习1 选择器找到li 通过查找父节点的方式把父节点background变红色 --> */

        /* let li = document.querySelector('li'); */

        /* li.parentNode.style.background = 'red' */



        let div = document.querySelector('div');

        /* 练习2    通过选择器 选择到div

        通过div 来找h1 ，把h1改成背景红色，字体大写变成20px

        通过div 来找ul  ，把ul改成背景色是绿色

        通过div 来找到h2， 把h2宽度改成200px 高度变成100px

        背景色改成蓝色*/

        /* div.childNodes[1].style.background = 'red'

        div.childNodes[1].style.fontSize = '20px'

        div.childNodes[3].style.background = 'green'

        div.childNodes[5].style.background = 'blue'

        div.childNodes[5].style.width= '200px'

        div.childNodes[5].style.height= '100px' */

            /*获得div 元素 通过使用firstChild 和 nextSibling

        的方式把 ul 的color 属性变成红色

        获得 div元素 通过使用lastChild 和 previSib的方式 把h2的font-size属性变成 50px*/

        div.firstChild.nextSibling.nextSibling.nextSibling.style.background = 'red'

        div.lastChild.previousSibling.style.fontSize = '50px'

    </script>