网站建设需要会什么网站设计就业
一、Dom获取&属性操作
（一）、 Web API 基本认知
1、变量声明
const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型，const声明的变量，里面存的不是 值，是 地址。
有了变量先给const，如果发现它后面是要被修改的，再改为let
const中数组和对象里面可以修改因为栈没改变地址
2、作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
3、什么是DOM
DOM 是文档对象模型
作用：操作网页内容，可以开发网页内容特效和实现用户交 互
4、DOM树
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
作用：文档树直观的体现了标签与标签之间的关系
5、DOM对象
-
DOM对象：浏览器根据html标签生成的 JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
-
DOM的核心思想： 把网页内容当做对象来处理
-
document 对象： 是 DOM 里提供的一个对象
它提供的属性和方法都是用来访问和操作网页内容的
（二）、获取DOM对象
1、 根据CSS选择器来获取DOM元素 (重点)
1）选择匹配的第一个元素
语法：document.querySelector()2.参数: 包含一个或多个有效的CSS选择器 字符串
3.返回值： CSS选择器匹配的第一个元素,一个 HTMLElement对象。
4.如果没有匹配到，则返回null。
实例：
<html lang="en">
<style>.box {width: 200px;height: 100px;background-color: aqua;}
</style>
<body><p id='nav'>首页</p><div class="box"> 123</div><script>//1、标签名获取console.log(document.querySelector(`div`));//2、类选择器获取console.log(document.querySelector(`.box`));//console.dir() 打印元素对象的属性和方法console.dir(document.querySelector(`div`))//3、ID选择器获取console.log(document.querySelector(`#nav`));//4、获取第一个对象console.log(document.querySelector(`ul li:first-child`));//获取第一个小li</script>
</body>
</html>2）选择匹配的多个元素
语法：
document.querySelectorAll(``)参数: 包含一个或多个有效的CSS选择器 字符串
返回值： CSS选择器匹配的NodeList 对象集合
例如：
document.querySelectorAll(`ul li`)
document.querySelectorAll(``)得到的是一个伪数组：有长度有索引号的数组；但是没有 pop() push() 等数组方法想要得到里面的每一个对象，则需要遍历（for）的方式获得。实例
//5、获取全部的小li divconsole.log(document.querySelectorAll(`div`));//[div.box, div.box, div.box]let s = document.querySelectorAll(`div`)
//6、遍历 for循环for (let i = 0; i< s.length; i++) {console.log(s[i]);//数组类型的打印console.dir(s[i]);//对象的形式打印}3） 他们两者小括号里面的参数注意事项
** 里面写css选择器 ；**
** 必须是字符串，也就是必须加引号**
2、其他获取DOM元素方法（了解）
//1、根据id获取一个元素console.log(document.getElementById('nav'));//2、根据 标签获取一类元素 获取页面 所有divconsole.log(document.getElementsByTagName('div'));//[div.box, div.box, div.box]//3、根据 类名获取元素 获取页面 所有类名为 box的console.log(document.getElementsByClassName('box'));//[div.box, div.box, div.box]
（三）、操作元素内容
1、元素innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签
实例
<p class="info">你好js</p><script>//获取标签内部的文字const info = document.querySelector(`.info`)//添加/修改标签内部文字内容info.innerTest ="hello"//对<p>内容进行了更新，页面上只显示hello</script>2、元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符
<p class="info">你好js</p><script>//获取标签内部的文字const info = document.querySelector(`.info`)//添加/修改标签内部文字内容info.innerHTML ="<strong>hello<strong>"//对<p>内容进行了更新，页面上只显示hello</script>（四）、操作元素属性
1、操作元素常用属性
语法：
对象.属性 = 值
实例
<body><img src="./01.jpg" alt=""><script>//1、获取元素const img = document.querySelector(`img`)//2、操作元素img.src = './02.jpg'//更换了图片</script>
</body>2、操作元素样式属性
1）、通过 style 属性操作CSS
语法：对象.style.样式属性 = 值实例
<style>.box {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box"></div><script>// 1. 获取元素const box = document.querySelector('.box')//2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位box.style.width = '300px'// 多组单词的采取 小驼峰命名法box.style.backgroundColor = 'hotpink'box.style.border = '2px solid blue'box.style.borderTop = '2px solid red'</script>
</body>注意
-
修改样式通过style属性引出
-
如果属性有-连接符，需要转换为小驼峰命名法
-
赋值的时候，需要的时候不要忘记加css单位
2）、操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：元素.calssName = '类名'实例
<style>div {width: 200px;height: 200px;background-color: pink;} .box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border: 1px solid #000;}
</style>
<body><div></div><script>//1、获取元素const div = document.querySelector(`div`)//2、添加类名 class 是关键字，我们用classNamediv.className = `box`</script>
</body>注意
-
由于class是关键字, 所以使用className去代替
-
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类
div.className = `nav box`//box将nav覆盖了3）、通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
| 方法名 | 方法 | 作用 |
|---|---|---|
| 追加类 | 元素.classList.add('类名') | 追加一个类(类名不加点，并且是字符串) |
| 删除类 | 元素.classList.remove('类名') | 删除一个类(类名不加点，并且是字符串) |
| 切换类 | 元素.classList.toggle('类名') | 对所定的元素进行查询，有就删掉;没有就加上 |
3、 操作 表单元素 属性
1）获取表单里面的值与修改
innerHTML不能修改表单元素
<body><input type="text" value="请输入姓名"><script>//1、获取标签对象const input =document.querySelector(`input`)//2、获取值console.log(input.value);//3、修改input.value = 'sef'//修改值input.type = `password` //变成密码隐藏了</script>
</body>2）按钮是否选中（checked）
<body><input type="checkbox" name="" id="box"><script>let box = document.querySelector(`#box`) //利用id选择器获取标签box.checked= true; //也可以带引号‘true’但是不提倡</script>
</body>3），按钮是否禁用（disabled）
<body><button onclick="">点击</button><script>let button = document.querySelector(`button`)button.disabled = true;//按钮禁用 false不禁用</script>
</body>4）、点击后显示的内容
<body><button onclick=" printHello()">点击</button><script>function printHello() {//点击访问alert(`hello`)}//使用此函数的同时，上面的onclick要引用函数</script>
</body>4、自定义属性
-
语法：的data-自定义属性
-
在标签上一律以data-开头
-
在DOM对象上一律以dataset对象方式获取
-
实例：
-
<body><div data-id="1" data-spm="不知道">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div><script>const one = document.querySelector('div')console.log(one.dataset.id) // 1 dataset相当于对象console.log(one.dataset.spm) // 不知道 对象.元素 取值</script> </body>
（五）、定时器-间歇函数
能够使用定时器函数重复执行代码
1、开启定时器
setInterval(函数，间隔时间) //间隔时间单位是毫秒
作用：每隔一段时间调用这个函数注意：
-
函数名字不需要加括号
-
定时器返回的是一个id数字
例如：
<script>//方式一：function re() {console.log(`前端程序员`);}//每隔一秒调用函数setInterval(re, 1000) //注意此处函数不能加括号//方式二：使用匿名函数setInterval(function () { console.log(`hello`) }, 1000)let num = setInterval(re, 1000)console.log(num);//定时器返回的是id数字</script>2、关闭定时器
语法：
let 变量名 = setInterval(函数, 间隔时间) clearInterval(变量名)四、Dom节点&移动端滑动
（一）日期对象
（二）节点操作
1、DOM 节点
DOM树里每一个内容都称之为节点
DOM节点的分类？
-
元素节点 比如 div标签
-
属性节点 比如 class属性
-
文本节点 比如标签里面的文字
2、查找节点
1）父节点查找 ：parentNode
-
返回最近一级的父节点 找不到返回为null
-
语法： 子元素.parentNode
-
实例：
<body>
<div class="yeye"><div class="dad"><div class="baby"></div></div>
</div><script>let baby = document.querySelector(`.baby`)console.log(baby.parentNode);//拿到dad bady的父级元素console.log(baby.parentNode.parentNode);//拿到yeye bady父级的父级元素
</script>
</body>2）子节点查找：childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性 （重点）
-
仅获得所有元素节点
-
返回的还是一个伪数组
-
语法：父元素.children
-
实例：
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script>let ul = document.querySelector(`ul`)console.log(ul.children);//得到伪数组 存在五个小li对象console.log(ul.children[1]);//得到第二个元素对象li</script>
</body>3）、兄弟关系查找
-
下一个兄弟节点 ： nextElementSibling 属性
-
上一个兄弟节点 ：previousElementSibling 属性
-
实例：
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script>let li = document.querySelector(`ul li:nth-child(3)`) /选择第三个小liconsole.log(li);//第三个小li的上一个兄弟console.log(li.previousElementSibling);//第三个小li的下一个兄弟console.log(li.nextElementSibling);
</script>
</body>3、增加节点
1）、创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
语法：
//创建一个心得元素节点document.createElement(`标签名`)2）、追加节点
-
插入到父元素的最后一个子元素
语法： 父元素.appendChild（要插入的元素） -
插入到父元素中某个子元素的前面：
语法：
父元素.insertBefore（要插入的元素，放在那个元素前面）//查找要插入的元素位置 使用父元素.children[下标] 进行查找3）增加节点实例
<body>
<ul><li>我是老大</li>
</ul>
<script>//1、创建一个新节点let li = document.createElement(`li`)li.innerHTML = `我是老二`//修改值//2、追加节点//2.1、获取ullet ul=document.querySelector(`ul`)//2.2、插入到末尾//ul.appendChild(li)///2.3、插入到某一个元素前面，insertBefore（要插入的元素，放在那个元素前面）ul.insertBefore(li,ul.children[0])//ul.children[0]查子元素的第一个元素
</script>
</body>4）、克隆节点
-
复制一个原有的节点
-
把复制的节点放入到指定的元素内部
-
语法：
//克隆一个已有的元素节点
元素.cloneNode(布尔值)注意：
-
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
-
若为true，则代表克隆时会包含后代节点一起克隆
-
若为false，则代表克隆时不包含后代节点
-
默认为fals
实例：
<body><ul><li>1</li><li>2</li><li>3</li></ul>
<script>//1、获取到父节点let ul = document.querySelector(`ul`)//ul.children[0]//ul中的第一个元素let li = ul.children[0].cloneNode(true)//追加元素 （不带true的话只复制标签，而没有里面的值）ul.appendChild(li)</script>
</body>4、删除节点
-
若一个节点在页面中已不需要时，可以删除它
-
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
-
语法：
父元素.removeChild(要删除的元素）
父元素.remove() //删除全部元素-
注：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点