节点属性
/* childNodes返回子节点集合,childNodes[i] */
/* 只返回子节点，如果存在空格或者换行，也会被算成一个子节点 */
//let div=document.querySelector('div');
//获得ul
//console.log(div.childNodes[3]);
//firstChild返回节点的第一个子节点
//lastChild返回节点的最后一个子节点
//nextSibling 下一个节点
//previousSibling上一个节点
/* let div=document.querySelector('div');
console.log(div.childNodes);
div.lastChild.previousSibling.style.fontSize='50px';
div.firstChild.nextSibling.nextSibling.nextSibling.style.color='red'; */
//忽略空格和换行；
//firstElementChild返回节点的第一个子节点
//lastElementChild返回节点的最后一个子节点
//nextElementChild返回节点下一个子节点
//previousElementChild返回节点的上一个子节点
/* let div=document.querySelector('div');
console.log(div.childNodes);
div.childNodes[1].style.background='red';
div.childNodes[1].style.fontSize='20px';
div.childNodes[3].style.background='green';
div.childNodes[5].style.width='200px';
div.childNodes[5].style.height='100px';
div.childNodes[5].style.background='blue'; */
/* let li = document.querySelector('li');
console.log(li);
parentNode返回节点的父节点
console.log(li.parentNode);
li.parentNode.style.background = 'red'; */
创建节点
<button onclick="fn()" id='btn1'>创建一个div</button>
<script>
function fn(){
/* documen.createElement('元素名')创建元素节点 */
let div1=document.createElement('div');
/* documen.createText('文本')创建文本节点 */
let divText=document.createTextNode('我是div')
/* A.appendChild(B) 把B节点追加至A节点的末尾 */
div1.appendChild(divText)
let body=document.querySelector('body');
body.appendChild(div1)
let h1a=document.createElement('h1')
let h1Text=document.createTextNode('我是h1')
h1a.appendChild(h1Text)
div1.appendChild(h1a)
/* 父节点.insertBefore(A,B) 把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>
节点的克隆和删除
<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>
