JS-DOM节点操作
DOM节点
DOM树里每一个内容都称之为节点
节点类型
元素节点
所有的标签 比如 body div
html 是根节点
属性节点
所有的属性 比如 href
文本节点
所有的文本
查找节点
父节点查找
parentNode 属性
返回最近一级的父节点 找不到的返回null
语法:子节点.parentNode
<div class="father">
<div class="son">
儿子
</div>
</div>
<script>
let son=document.querySelector('.son');
console.log(son.parentNode)
</script>
子节点查找
childNode
获取所有子节点、包括文本节点(空格、换行)、注释节点等
语法:父元素.childNode
<button>点击</button>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<script>
let but=document.querySelector('button');
let ul=document.querySelector('ul');
but.addEventListener('click',function(){
console.log(ul.childNodes);
})
</script>
children
仅获取所有元素节点
返回的还有一个伪数组
语法:父元素.children
<button>点击</button>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<script>
let but=document.querySelector('button');
let ul=document.querySelector('ul');
but.addEventListener('click',function(){
console.log(ul.children);
})
</script>
兄弟节点
兄弟关系查找:
1.下一个兄弟节点
nextElementSibling 属性
<button>点击</button>
<ul>
<li>11</li>
<li class="test">22</li>
<li>33</li>
</ul>
<script>
let but=document.querySelector('button');
let test=document.querySelector('.test');
but.addEventListener('click',function(){
test.nextElementSibling.style.color='red'
console.log(test.nextElementSibling);
})
</script>
2.上一个兄弟节点
previousElementSibling 属性
<button>点击</button>
<ul>
<li>11</li>
<li class="test">22</li>
<li>33</li>
</ul>
<script>
let but=document.querySelector('button');
let test=document.querySelector('.test');
but.addEventListener('click',function(){
test.previousElementSibling.style.color='red'
console.log(test.previousElementSibling);
})
</script>
增加节点
创建节点
即创造出一个新的网页元素,在添加到网页内,一般先创建节点,然后再插入节点
创建元素节点语法:document.createElement(‘标签名’)
<script>
let div=document.createElement('div');
console.log(div);
</script>
追加节点
要想在界面看到,还得插入到某个父元素中
插入到父元素的最后一个子元素
语法:父元素.appendChild(要插入的元素)
<ul></ul>
<script>
let ul=document.querySelector('ul');
let li=document.createElement('li');
li.innerHTML='1111';
ul.appendChild(li)
console.log(ul)
</script>
插入到父元素中某个子元素的前面
语法:父元素.insertBefore(要插入的元素,在哪个元素前面)
<ul>
<li>22</li>
<li class="test">444</li>
</ul>
<script>
let ul=document.querySelector('ul');
let li=document.createElement('li');
li.innerHTML='111'
ul.insertBefore(li,ul.children[1])
console.log(ul)
</script>
克隆和删除节点
克隆节点
语法:元素.cloneNode(布尔值)
cloneNode会克隆出一个根源标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false
<ul>
<li>11</li>
</ul>
<script>
let ul=document.querySelector('ul');
let newUl=ul.cloneNode(true)
document.body.appendChild(newUl)
console.log(newUl)
</script>
删除节点
在JavaScript原生DOM操作中,要删除元素必须通过父元素删除
语法:父元素.removeChild(要删除的元素)
<button>点击</button>
<ul>
<li>11</li>
</ul>
<script>
let btn=document.querySelector('button')
let ul=document.querySelector('ul');
btn.addEventListener('click',function(){
ul.removeChild(ul.children[0])
console.log(ul.children);
})
</script>
点击按钮后
注:
如不存在父子关系则删除不成功
删除节点和隐藏节点是有区别的,隐藏节点还是存在的,但是删除则是从html中删除节点
时间对象
事件对象:用来表示时间的对象
作用:可以得到当前系统的时间
在代码中发现 new 关键字时,一般将这个操作称为 实例化
获取当前时间:let data=new Data()
<script>
let data=new Date();
console.log(data);
</script>
获取指定时间:let data=new Date(‘2022-5-4’)