let
button =
document
.
querySelector
(
'button'
);
console
.
dir
(button);
console
.
dir
(button.
parentNode
);
button.
parentNode
.
style
.
backgroundColor
=
'red'
;
</
script
>
</
body
>
子节点查找
childNodes
获得所有子节点.包括文本节点(空格,换行),注释节点等
children(重点)!!!
仅获得所有元素节点,返回一个伪数组,没有元素返回空数组
父元素.children
<style>
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: aqua;
padding: 20px;
height: 30px;
background-color: yellow;
</style>
</head>
<li>a1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>b1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<script>
let uls = document.querySelectorAll('ul');
for (let index = 0; index < uls.length; index++) {
uls[index].addEventListener('click', function () {
for (let j = 0; j < this.children.length; j++) {
this.children[j].style.display="none";
</script>
</body>
兄弟节点查找
1下一个兄弟节点
nextElementSibling属性
2上一个兄弟节点
previousElementSibling属性
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<script>
1 获取所有的li标签 数组
2 遍历 绑定点击事件
3 事件触发了
this.next
this.previou 获取到对应的元素 设置他们的样式
let lis = document.querySelectorAll('li');
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click', function () {
this.previousElementSibling.style.backgroundColor = 'blue';
this.nextElementSibling.style.backgroundColor = 'green';
</script>
</body>
创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
创建节点的方法
document.creatElement('标签名')
想要在界面看到,还得插入到某个父元素中
1插入到父元素的最后一个子元素
父元素.appendChild(要插入的元素)
2插入到父元素中的某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)
<li>1</li>
<li>2</li>
<script>
let li = document.createElement('li');
li.innerText="这个是新创建的li标签";
li.style.backgroundColor="green";
let ul = document.querySelector('ul');
ul.appendChild(li);
</script>
</body>
<button>123</button>
</div>
<p></p>
<script>
let button = document.querySelector('button');
let p = document.querySelector('p');
</script>
</body>
特殊情况下,我们新增节点,按如下操作:复制一个原有的节点,把复制的节点放入到指定的元素内部
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆---深拷贝
若为false,则代表克隆时不包含后代节点--浅拷贝(默认为flase)
元素.cloneNode(布尔值)
<style>
margin: 0;
padding: 0;
box-sizing: border-box;
.box {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid #000;
</style>
</head>
<div class="box">
<button>点击</button>
</div>
<script>
let box = document.querySelector('.box');
let newBox = box.cloneNode(true);
document.body.appendChild(newBox);
</script>
</body>
若一个节点在页面中已不需要时,可以删除它
在js原生DOM操作中,要删除元素必须通过父元素删除
父元素.removeChild(要删除的元素)
注意:如不存在父子关系则删除不成功
删除节点和隐藏节点()有区别:隐藏节点还是存在的,但删除,则是从html'中删除节点
<button>删除ul中某一个li标签</button>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<script>
let button = document.querySelector('button');
let ul = document.querySelector('ul');
let li = document.querySelector('li:nth-child(1)');
button.addEventListener('click', function () {
ul.removeChild(li);
ul.remove();
</script>
</body>
补充判断真伪数组
<div></div>
<div></div>
<script>
let arr=[];
console.log(arr.filter);
let divs=document.querySelectorAll("div");
console.log(divs.filter);
</script>
</body>
<script>
let date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
</script>
<h1></h1>
<script>
let h1 = document.querySelector('h1');
setInterval(function () {
let nowDate = new Date();
console.log(1);
let fullyear = nowDate.getFullYear();
let month = nowDate.getMonth();
let date = nowDate.getDate();
let hours = nowDate.getHours();
let minutes = nowDate.getMinutes();
let seconds = nowDate.getSeconds();
h1.innerText = `${fullyear}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}, 1000);
</script>
<script>
let date=new Date();
console.log(date.getTime());
console.log(+(new Date()) );
console.log(Date.now());
</script>
复制代码
