1.DOM设置属性：
<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是针对本身具有的属性来设置的值
//datasrc自定义的属性
function getval (){
let val = div1.getAttribute('dataval')
}
</script>
DOM设置属性练习：
请选择你喜欢的书籍
<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.节点的创建和插入：
<button onclick="fn()" id="btn1">创建一个div</button>
<!-- <div>我i是div</div> -->
<script>
function fn(){
/* document.createElement('元素名') 创建元素节点*/
let div1 = document.createElement('div')
console.log(div1);
/* document.createTextNode('文本') 创建文本节点*/
let divText = document.createTextNode('我是div')
console.log(divText);
/* appendChild (B) 把B节点追加至A节点的末尾 */
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.克隆和删除节点：
<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) 复制某个指定的节点 */
let div1 = document.getElementsByClassName('div-class')[0];
console.log(div1);
/* 获取自己的元素 再插入到body中是可以的,
但是插入的时候发现 都一个元素节点
两种插入的实现方式 第一种创建新的节点去插入
第二种 clone出一个新的节点去插入*/
/* cloneNode如果里面不传true 表示传入自身节点（不包括子节点）
传true 表示 既克隆自身节点 也克隆了自身的子节点 */
let divClone = div1.cloneNode(true);
// console.log(divClone);
let text1 = document.createTextNode('=')
divClone.appendChild(text1)
body.insertBefore(divClone,div1)
// body.appendChild(divClone);
}
/* 写一个h1 标签 内容是我是h1 点击h1 可以克隆自己
可以把克隆出来的 文本内容 再加个 字符串 "=" 放在原来的h1的前面 */
</script>
克隆和删除节点练习：
<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>
