<二>从了解到掌握DOM，轻松get知识点

捏没有双下巴
133 阅读4分钟

一、节点类名的增删查改

1、获取、查找
el.className：一次性修改元素的classList。
const div = document.getElementsByClassName('sss')[0];
console.log(div.className); // 'sss fff'
console.log(div.classList); // []
2、新增
classList.add：在不影响原始class的情况下追加新的class。
div.classList.add('qwe');
div.className += ' uuu';
console.log(div.classList);
3、删除
classList.remove：删除指定的class，没指定的不会删除。
div.classList.remove('qwe');
let arr = div.className.split(' ');
arr.pop();
div.className = arr.join(' ');
4、修改
classList.replace：将前者类名替换为后者类名。
div.className = 'sss fff hhh';
div.classList.replace('fff', 'asdf');
5、是否存在
classList.contains：检查是否存在指定的class。
console.log(div.classList.contains('asdf')); // true
console.log(div.classList.contains('iuytr'));//false
案例

一个div元素点击更改背景色 默认为红色，点击更改为蓝色 ，再次点击更改为红色。

CSS与HTML： 
#idteste {
            width: 300px;
            height: 120px;
            background-color: red;
        }
 #idteste.blue {
            background-color: blue;
        }

<div class="test" id="idteste"></div>
javascript:
const test = document.querySelector('.test');
let flag = true;
处理一：
test.onclick = function() {
      if(flag) {
        test.style.backgroundColor = 'blue';
      } else {
        test.style.backgroundColor = 'red';
      }
      flag = !flag;
} 
处理二：
test.onclick = function() {
      if (flag) {
        test.classList.add('blue');
      } else {
        test.classList.remove('blue');
      }
      flag = !flag;
}

二、节点自定义属性的增删查改

const div = document.querySelector('.data');
1、查找、获取
el.dataset.myattr：获取自定义属性的值。
console.log(div.dataset);
console.log(div.dataset.age);
2、新增
div.dataset.sex = 2;
3、删除
 delete div.dataset.sex;
4、修改
 div.dataset.index = 99;
案例

更改案例tab切换 --- 属性控制。

CSS:
button {
      width: 120px;
      height: 40px;
      background-color: #ccc;
      border-radius: 5%;
      border: none;
      margin-left: 20px;
      }
div {
      width: 300px;
      height: 120px;
      border: 1px solid rebeccapurple;
      margin-top: 10px;
      display: none;
      }
.content1 {
      display: block;
      }
方式1：/* button:first-child {

      margin-left: 0px;

    } */
button:first-of-type {
      margin-left: 0;
    }

HTML：
<button class="btn1" data-index="1">TAB1</button>
<button class="btn2" data-index="2">TAB2</button>
<button class="btn3" data-index="3">TAB3</button>

<div class="content1" data-index="1">TAB-content1</div>
<div class="content2" data-index="2">TAB-content2</div>
<div class="content3" data-index="3">TAB-content3</div>

JavaScript:
方式1：
const btns = document.querySelectorAll('button');
const contents = document.querySelectorAll('div');:
btns.forEach((i, index) => { 
      i.onclick = function() { 
      contents.forEach((item) => {
          item.style.display = 'none';
      });
      contents[index].style.display = 'block';
     }
});
console.log(btns);

方式2：
const btns = document.querySelectorAll('button');
const contents = document.querySelectorAll('div');
btns.forEach((i) => {
     i.onclick = function() {
     contents.forEach((it) => {
        it.style.display = 'none';
        if (i.dataset.index === it.dataset.index) {
                it.style.display = 'block';
         }
       });
     }
})

三、节点任意属性的增删查改

<div data-id="6" name="111" id="sss" class="ccc"></div>
const div = document.getElementById('sss');
1、获取/查找
console.log(div.getAttribute('name')); // 获取指定属性
console.log(div.attributes); // 获取所有属性
console.log(div.attributes[1].value);
console.log(div.attributes.name.value);
2、新增
div.setAttribute('title', '大海');
3、修改
div.attributes.name.value = 99;
div.setAttribute('title', 'flocen');
4、 删除
div.removeAttribute('title');
5、是否存在
console.log(div.hasAttribute('title')); // false
console.log(div.hasAttribute('name')); // true

重点：getAttribute 和 setAttribute

四、节点style样式的增删查改

1、只能进行行内样式
.sss {
      font-family: '隶书';
    }
    
<div class="sss">style行内样式</div>

const div = document.getElementsByClassName('sss')[0];
console.log(div.style.color);
console.log(div.style.backgroundColor);
console.log(div.style);

div.style.fontSize = '30px';
div.style.color = '';
div.style.backgroundColor = 'yellow';

//获取元素的最终绘制样式 window.getComputedStyle(el) 
//参数：el表示获取的是哪个元素的最终样式
console.log(getComputedStyle(div).fontFamily);
2、获取、设置都是行内样式
const div = document.getElementsByClassName('sss')[0];
div.style.color= 'red';

五、让窗口滚动到指定位置

1、window.scroll()

接收两个参数，依次为X坐标和Y坐标；设置滚动条的偏移位置。

2、window.scrollTo()

接收两个参数，依次为X坐标和Y坐标；设置滚动条的偏移位置（同上）。

3、window.scrollBy()

接收两个参数，不过参数分别为X轴的偏移量和Y轴的偏移量，并且可以增加或者减少。

<div style="height: 2000px; width: 300px; background-color: #ccc;"></div>

document.getElementsByTagName('div')[0].onclick = function() {
      window.scroll(0, 500);//设置滚动条Y轴位置在500像素的地方。
      window.scrollTo(0, 500);//设置滚动条Y轴位置在500像素的地方。
      window.scroll(0, 500);//使得滚动条Y轴的位置，在当前的基础上增加500。
}
案例

小说：开始自动向上滚动；暂停：停止到当前位置。

CSS:
.btns {
      position: fixed;
      right: 0;
      top: 50%;
    }
.btns div {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: rgba(0, 0, 0, .5);
      border-radius: 5%;
    }
.pause {
      margin-top: 10px;
    }

HTML：
<div class="btns">
	<p>文字省略...</p>
</div>
<div class="btns">
        <div class="read">开始</div>
        <div class="pause">暂停</div>
</div>

JavaScript:
const read = document.getElementsByClassName('read')[0];
const pause = document.getElementsByClassName('pause')[0];
let timer;
        // 开始
        read.onclick = function() {
            timer = setInterval(function() {
                window.scrollBy(0, 20);
            }, 400);
        }
        // 暂停
        pause.onclick = function() {
            clearInterval(timer);
        }

六、页面滚动的距离

1、window.pageXOffset

返回文档/页面水平方向滚动的像素值。

2、window.pageYOffset

返回文档在垂直方向已滚动的像素值。

<div style="height: 2000px; width: 300px; background-color: red;"></div>

document.getElementsByTagName('div')[0].onclick = function() {
            window.scrollBy(0, 200);
            console.log(window.pageYOffset);
}

window.onscroll：窗口滚动事件
window.onscroll = function() {
            console.log(1111);
        }
案例：滚动导航栏固定
CSS：
* {
      margin: 0;
      padding: 0;
    }
.header {
      width: 100%;
      height: 40px;
      background-color: red;
      list-style: none;
      color: aliceblue;
    }
.header li {
      height: 40px;
      width: 80px;
      text-align: center;
      line-height: 40px;
      float: left;
    }
.container {
      padding: 10px 30px;
    }
.container div {
      height: 300px;
      border: 1px dashed seagreen;
      margin-top: 10px;
    }
.footer {
      height: 40px;
      background-color: red;
      color: aliceblue;
      text-align: center;
      line-height: 40px;
      margin-bottom: 10px;
    }

HTML:
	<ul class="header">
        <li>首页</li>
        <li>列表</li>
        <li>购物车</li>
        <li>客服</li>
    </ul>
    <div class="container">
        <div class="top"></div>
        <div class="center"></div>
        <div class="bottom"></div>
    </div>
    <div class="footer">底部</div>

JavaScript；
const header = document.querySelector('.header');
        window.onscroll = function() {
            if(window.pageYOffset > 50 ) {
                header.style.position = 'fixed';
                header.style.top = 0;
            } else {
                header.style.position = 'static';
        }
}

七、窗口的可视区域尺寸

1、 获取浏览器窗口文档显示区域的宽度，包括滚动条

（1）window.innerHeight; 浏览器窗口的内部高度

（2）window.innerWidth; 浏览器窗口的内部宽度

注意：这两个属性在IE8以及以下不兼容。

2、在不同浏览器都实用的 JavaScript 方案
const x = window.innerWidth ||  document.documentElement.clientWidth || document.body.clientWidth;

const y = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
3、标准模式和混杂模式下兼容写法
// document.compatMode === 'CSS1compat'; 标准模式 标准模式下document.documentElement.clientWidth更真实
// document.compatMode === 'Backcompat'; 混杂模式 混杂模式下document.body.clientWidth更真实

if(document.compatMode === 'CSS1compat') {
      const x = window.innerWidth || document.documentElement.clientWidth || document.body.parentNode.clientWidth || document.body.clientWidth;
} else {
      const x = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || document.body.parentNode.clientWidth;
}

拓展：console.log(document.compatMode);获取当前模式；

'CSS1Compat'表示标准模式；

'BackCompat'表示混杂模式；

案例

两个盒子 在窗口发生变化时 自动调整 两列布局 还是单列布局。

CSS:
.containner div {
      width: 400px;
      height: 300px;
      background-color: red;
      margin-right: 10px;
    }
.containner .right {
      background-color: #0000ff;
    }
.containner {
      display: flex;
    }

HTML:
	<div class="header">
        <ul class="tab">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="header_search">
            <input type="text">
            <div class="icon"></div>
        </div>
    </div>
    <div class="containner">
        <div class="left"></div>
        <div class="right"></div>
    </div>

JavaScript:
const containner = document.getElementsByClassName('containner')[0];
        window.onresize = function() {
            if(window.innerWidth >= 950) {
                containner.style.display = 'flex';
            } else {
                containner.style.display = 'block';
        }
}

八、懒加载

HTML:
<div style="height: 2000px;">懒加载</div>
<img src="" data-src="./imgs/baidu.png" alt="">
    
JavaScript:     
window.onscroll = function() {
      if(window.pageYOffset > 800) {
        document.getElementsByTagName('img')[0].src = document.getElementsByTagName('img')[0].dataset.src;
      }
}

注意：数据量很多的时候用懒加载。

九、预加载

const imgs = ['./imgs/baidu.png', './imgs/baidu.png', './imgs/baidu.png'];
    imgs.forEach((i) => {
      const img = document.createElement('img');
      img.src = i;
      document.body.append(img);
});

注意：数据量少的时候用预加载。

十、元素的几何尺寸

CSS:
div {
      /* border: 10px solid red; */
      /* margin: 20px; */
      border: 10px solid green; 
      padding: 10px;
    }
body {
      padding: 10px;
      border: 10px solid red;
    }

HTML:
<div style="width: 400px; height: 300px; background-color: red;">元素的几何尺寸</div>

JavaScript；
const div = document.getElementsByTagName('div')[0];
console.log(div.getBoundingClientRect());

待续......

(仅适用于初学者，大佬请绕道，当然，要是有错误的话指点一下将不胜感激，嘻嘻嘻)

avatar
文章
阅读
粉丝