JS DOM:Document Object Model（文档对象模型）一、找到元素 1.通过 id 属性获取对象 d

一、找到元素

1.通过 id 属性获取对象
document.getElementById()

2.通过标签名获取对象
getElementsByTagName 是获取到元素的集合，需要通过下标来选取对应的元素。
document.getElementsByTagName('')[ ]

3.通过 class 属性获取对象
getElementsByClassName 也是一个元素集合，需要通过下标来选择对应的元素。
document.getElementsByClassName('')[ ]

4.通过 querySelector
（1）获取含有指定id选择器的元素
document.querySelector('# ')
（2）获取含有指定class选择器的元素，如含有相同class的元素有很多，则只获取第一个。
document.querySelector('. ')
（3）获取含有指定元素选择器的元素，如有多个元素能匹配上，则只获取第一个。
document.querySelector(' ')

5.使用 querySelectorAll
（1）可以获取多个含有对应元素选择器的dom元素，通过下标选择第几个。
document.querySelectorAll('div')[ ]
（2）可以获取多个含有对应类选择器的dom元素，通过下标选择第几个。
document.querySelectorAll('. ')[ ]

⭐特殊元素
document.body 返回body元素对象
document.documentElement 返回html元素对象

⭐获取元素样式
（1）通过 style 获取行内样式
元素名.style.属性名
例：div.style.fontSize （❤️属性名用驼峰的方式获取）

（2）使用 window.getComputedStyle 可以获取所有样式，
包括行内样式、内部样式、外部样式。
例：window.getComputedStyle(div,null).color

二、改变元素

<body>
    <h1 onclick="change()" id='ha' class='hi'>today is your birthday</h1>
    <button onclick="happen()">click me</button>
    <button onclick="get()">getvalue</button>
    <div id='a'><img src="" alt="" skill=''></div>
    <div id='b' onclick="change2()" style="background-color: blue;width: 50px;height: 50px;"></div>
    <script>
        function change2() {
            let di = document.getElementById('b');
            di.style.backgroundColor = 'red';
            di.style.height = '100px';
            di.style.width = '100px';
            di.style.marginTop = '100px';
            di.style.transition = 'all 2s'
        }

        let ima = document.querySelector('#a img');
        function get() {
            console.log(ima.src);
            console.log(ima.skill);
        }

        function happen() {
            ima.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F8%2F28%2F3e82b49a-0adc-4d3d-aef5-3018881f0ac7.jpg%3FimageView2%2F2%2Fw%2F500%2F&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642904361&t=3cc53d4a56142f14a085a9fd739c9f67";
            ima.width = '200';
            ima.height = '120';
            ima.skill = 'charming'
        }

        function change() {
            // document.getElementById('ha').innerHTML = '<h2>happy birthday</h2>' 
            // document.getElementsByClassName('hi')[0].innerHTML = '<h2>happy birthdayy</h2>'
            // document.querySelector('h1').innerHTML= '<h2>happy birthday</h2>'
            // document.querySelectorAll('h1')[0].innerHTML= '<h2>happy birthday</h2>'
            document.getElementsByTagName('h1')[0].innerHTML = '<h2>happy birthday</h2>'
        }
    </script>
</body>

❤️ 节点

parentNode 返回节点的父节点
childNodes 返回子节点集合（包括文本节点），childNodes[ ]
children 只返回子元素节点，其余节点不返回，children[ ]

⭐包括空格和换行
firstChild 返回节点的第一个子节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点

<body>
    <div>
        <h1> I'm h1.</h1>
        <ul>
            <li>
                I'm li.
            </li>
        </ul>
        <h2>I'm h2.</h2>
    </div>
    <script>
        let div = document.querySelector('div');
        console.log(div.childNodes);
        div.childNodes[1].style.backgroundColor = 'red';
        div.childNodes[1].style.fontSize = '20px';
        div.childNodes[3].style.backgroundColor = 'green';
        div.childNodes[5].style.backgroundColor = 'blue';
        div.childNodes[5].style.width = '200px';
     </script>
</body>

console.log(div.childNodes);

⭐中间带Element的选择节点属性忽略空格和换行直接获取元素节点
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling

JS DOM:Document Object Model（文档对象模型）

一、 找到元素

二、 改变元素

❤️ 节点

一、找到元素

二、改变元素