1.DOM設(shè)置屬性：
<img src="" alt="">
? ? <button ?onclick="getval"></button>
? ? <script>
? ? ? ? let img = document.querySelector('img')
? ? ? ? let srcUrl = ''
? ? ? ? /* img.width = '200'
? ? ? ? img.height = '300' */
? ? ? ? img.setAttribute('datasrc','123abc')
? ? ? ? img.setAttribute('src',srcUrl)
? ? ? ? img.setAttribute('width','300px')
? ? ? ? img.setAttribute('height','300px')
? ? ? ? //seAttribute是針對本身具有的屬性來設(shè)置的值
? ? ? ? //datasrc自定義的屬性
? ? ? ? function getval (){
? ? ? ? ? ? let val = div1.getAttribute('dataval')
? ? ? ? }
? ? </script>
DOM設(shè)置屬性練習(xí)：
?請選擇你喜歡的書籍
? ? ? ? <input type="radio" name="book" onclick="choose()" id="a">
? ? ? ? <label for="a">我和狗狗一起活下來</label>
? ? ? ? <input type="radio" name="book" onclick="choose()" id="b">
? ? ? ? <label for="b">灰霾來了怎么辦</label>
? ? ? ? <div>
? ? ? ? ? ? <img src="./dog.jpg" alt="">
? ? ? ? ? ? <p class="bookname"></p>
? ? ? ? </div>
? ? <img src="" alt=""><p></p>
? ? <script>
? ? ? ? let input = document.getElementsByTagName('input')
? ? ? ? let img = document.querySelector('img')
? ? ? ? let srcUrl1 = "./dog.jpg"
? ? ? ? let srcUrl2 = "./mai.jpg"
? ? ? ? let bookname = document.querySelector('.bookname')
? ? ? ? /* console.log(document.getElementsByTagName('input[0].checked'));
? ? ? ? console.log(document.getElementsByTagName('input[1].checked')); */
? ? ? ? function choose() {
? ? ? ? ? ? if (document.querySelector('#a').checked) {
? ? ? ? ? ? ? ? img.setAttribute('src', srcUrl1)
? ? ? ? ? ? ? ? img.setAttribute('width', '300px')
? ? ? ? ? ? ? ? img.setAttribute('height', '.400px')
? ? ? ? ? ? ? ? bookname.innerHTML = '我和狗狗狗一起活下去'
? ? ? ? ? ? ? ? bookname.style.color = 'red'
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? img.setAttribute('src', srcUrl2)
? ? ? ? ? ? ? ? img.setAttribute('width', '300px')
? ? ? ? ? ? ? ? img.setAttribute('height', '.400px')
? ? ? ? ? ? ? ? bookname.innerHTML = '灰霾來了怎么辦'
? ? ? ? ? ? ? ? bookname.style.color = 'red'
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
2.節(jié)點的創(chuàng)建和插入：
<button onclick="fn()" ?id="btn1">創(chuàng)建一個div</button>
? ? <!-- <div>我i是div</div> -->
? ? <script>
? ? ? function fn(){
? ? ? ? ? ? /* document.createElement('元素名') 創(chuàng)建元素節(jié)點*/
? ? ? ? let div1 = document.createElement('div')
? ? ? ? console.log(div1);
? ? ? ? /* document.createTextNode('文本') 創(chuàng)建文本節(jié)點*/
? ? ? ? let divText = document.createTextNode('我是div')
? ? ? ? console.log(divText);
? ? ? ? /* appendChild ?(B) 把B節(jié)點追加至A節(jié)點的末尾 */
? ? ? ? div1.appendChild(divText)
? ? ? ? console.log(div1);
? ? ? ? ? ? let body = document.querySelector('body')
? ? ? ? ? ? body.appendChild(div1)
? ? ? ? ? ? /* insertBefore(A,B) */
? ? ? ? ? ? let gege = document.createElement('button');
? ? ? ? ? ? let btnText = document.createTextNode('btn的哥哥');
? ? ? ? ? ? gege.appendChild(btnText)
? ? ? ? ? ? let didi = document.getElementById('btn1');
? ? ? ? ? ? body.insertBefore(gege,didi)
? ? ? ? }
? ? </script>
3.克隆和刪除節(jié)點：
<div onclick="cloneNd()" class="div-class">我是div1</div>
? ? <button onclick="rm()">刪除第一個</button>
? ? <script>
? ? ? ? function rm(){
? ? ? ? ? ? let body = document.getElementsByTagName('body')[0];
? ? ? ? ? ? let div1 = document.getElementsByClassName('div-class')[0];
? ? ? ? ? ? /* 父元素.removeChild(要被刪除的元素) */
? ? ? ? ? ? body.removeChild(div1)
? ? ? ? }
? ? ? ? function cloneNd(){
? ? ? ? ? ? let body = document.getElementsByTagName('body')[0];
? ? ? ? ? ? // let div1 = document.createElement('div')
? ? ? ? ? ? // let text = document.createTextNode('我是div1')
? ? ? ? ? ? // div1.appendChild(text);
? ? ? ? ? ? // body.appendChild(div1);
? ? ? ? ? ? /* cloneNode(deep) ? 復(fù)制某個指定的節(jié)點 */
? ? ? ? ? ? let div1 = document.getElementsByClassName('div-class')[0];
? ? ? ? ? ? console.log(div1);
? ? ? ? ? ? /* 獲取自己的元素 再插入到body中是可以的,
? ? ? ? ? ? 但是插入的時候發(fā)現(xiàn) 都一個元素節(jié)點
? ? ? ? ? ? 兩種插入的實現(xiàn)方式 第一種創(chuàng)建新的節(jié)點去插入
? ? ? ? ? ? 第二種 clone出一個新的節(jié)點去插入*/
? ? ? ? ? ? /* cloneNode如果里面不傳true 表示傳入自身節(jié)點（不包括子節(jié)點）
? ? ? ? ? ? 傳true 表示 既克隆自身節(jié)點 也克隆了自身的子節(jié)點 */
? ? ? ? ? ? let divClone = div1.cloneNode(true);
? ? ? ? ? ? // console.log(divClone);
? ? ? ? ? ? let text1 = document.createTextNode('=')
? ? ? ? ? ? divClone.appendChild(text1)
? ? ? ? ? ? body.insertBefore(divClone,div1)
? ? ? ? ? ? // body.appendChild(divClone);
? ? ? ? }
? ? ? ? /* 寫一個h1 標(biāo)簽 內(nèi)容是我是h1 點擊h1 可以克隆自己
? ? ? ? 可以把克隆出來的 文本內(nèi)容 再加個 字符串 "=" 放在原來的h1的前面 ?*/
? ? </script>
克隆和刪除節(jié)點練習(xí)：
<h1 onclick="cloneND()" class="h1-class">我是h1</h1>
? ? <script>
? ? ? ? function cloneND(){
? ? ? ? ? ? let body = document.getElementsByTagName('body')[0];
? ? ? ? ? ? let h1 = document.getElementsByClassName('h1-class')[0];
? ? ? ? ? ? let h1Clone = h1.cloneNode(true);
? ? ? ? ? ? let text1 = document.createTextNode('=')
? ? ? ? ? ? h1Clone.appendChild(text1)
? ? ? ? ? ? body.insertBefore(h1Clone,h1)
? ? ? ? }
? ? </script>
