当前位置：首页 > news >正文

网站建设需要会什么百度知道小程序

news 2025/7/8 17:19:00

网站建设需要会什么,百度知道小程序,上海营销平台网站建设,常州便宜的做网站服务一、Dom获取&属性操作 （一）、 Web API 基本认知 1、变量声明 const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化但是对于引用数据类型，const声明的变量，里面存的不是值，是地址…

一、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中删除节点

查看全文

http://www.ds6.com.cn/news/12387.html

删除后台wordpress新闻360优化大师旧版

WordPress 免费汉化主题seo基础入门

盗取dede系统做的网站模板百度推广销售员好做吗

高端网站建设费用石家庄网站建设案例

广州seo招聘信息sem和seo是什么