webApi第一天
概念
一套可以直接操作页面元素的代码，使用js去操作html和浏览器
分类
Dom
文档对象模型
DOM是浏览器提供的一套专门用来 操作网页内容 的功能（浏览器根据标签自动生成了对应js对象）
可以让我们通过js的方式很方便的控制页面标签
Bom
浏览器对象模型
获取Dom元素
获取一个dom元素
document，querySelector
<body>
<div class="box">我是div元素</div>
<span>我是span元素</span>
<p id="p1">我是p元素</p>
<script>
let divDom = document.querySelector('.box')
console.dir(divDom)
let spanDom = document.querySelector('span')
console.dir(spanDom)
let pDom = document.querySelector('#p1')
console.log(pDom)
</script>
</body>
获取数组
document，querySelectorAll
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//获取所有的li标签 返回一个伪数组
let lis = document.querySelectorAll('li')
for (let index = 0; index < lis.length; index++) {
lis[index].innerText = `这是第${index}个li`
}
console.log(lis);
</script>
---其他获取Dom元素方式
设置文本内容
1.document.weite
只能在body标签中些内容 以后很少用！
2.Dom元素.innerText='文本'
设置标签的文本内容
3.Dom元素.innerHTML='文本'
不仅可以设置文本内容 还可以添加标签
body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
document.write(`<h1>大漂亮</h1>`)
document.querySelector('li:nth-child(3)').innerText='<button>大漂亮</button>'
document.querySelector('li:nth-child(5)').innerHTML='<button>大聪明</button>'
/*
三种实现在标签中动态设置文本的方式
1. document.write 智能在body标签中书写 以后很少使用它
2. innerText 只能设置文本， 不能解析html字符串
2. innerHTML 既能设置文本， 也能解析html字符串
*/
</script>
</body>
设置元素样式
1.Dom元素.style
给元素添加行内样式
<body>
<div></div>
<script>
let divDom = document.querySelector('div')
divDom.innerText=prompt(``)
divDom.style.color='orange'
divDom.style.backgroundColor='pink'
divDom.style.fontSize='23px'
divDom.style.height='50px'
divDom.style.textAlign='center'
divDom.style.lineHeight='50px'
</script>
</body>
2.Dom元素.className
给元素添加样式类名(会先清空这个dom的元素 旧的所有的类名 然后再单独添加上 新的类名，如果想要同时设置多个 class 以空格做分割即可 )
<style>
.box {
width: 300px;
height: 300px;
background-color: blue;
font-size: 20px;
margin: 100px auto;
text-align: center;
line-height: 300px;
}
.box1 {
width: 500px;
border-radius: 50px;
background-color: orange;
font-size: 50px;
color: #fff;
}
</style>
</head>
<body>
<div>大漂亮</div>
<script>
/* className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
如果想要同时设置多个 class 以空格做分割即可 */
let divDom = document.querySelector('div')
divDom.className = 'box box1'
</script>
</body>
3.Dom元素.classList
给元素添加，删除样式类名
添加---Dom元素.classList.add('类名1'.'类名2',...)
删除---Dom元素.classList.remove('类名')
切换---Dom元素.classList.toggle('类名')
<style>
.box {
background-color: orange;
margin: 100px auto;
}
.box1 {
width: 200px;
}
.box2 {
height: 200px;
}
.box3 {
border-radius: 15px;
}
.box4 {
text-align: center;
font-size: 50px;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box box1">千金</div>
<script>
let divDom = document.querySelector('div')
//添加一个，多个类多个需要以逗号分隔
//divDom.classList.add（'box2'）
divDom.classList.add ('box2','box3','box4')
// 单独来指定移除一个类
divDom.classList.remove('box1')
// 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
divDom.classList.toggle('box1')
</script>
</body>
表单元素的属性设置
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。
- 正常的有属性有取值的 跟其他的标签属性没有任何区别。
表单属性的总结：
-
设置普通的输入框 input.value =“表单的值”
-
设置按钮的禁用
button.disabled = true 禁用
button.disabled = true 禁用
-
设置单选框或者复选框
radio.checked=true 选中
checkbox.checked=false 取消选中
-
设置下拉列表 select
option.selected = true 选中
-
文本域标签 属于表单元素 又是双标签 。
获取文本内容：
获取文本内容可以用 .value 和 innerHTML ，innerText 使用无效。
想要设置textarea 里面文本内容的时候，用.value 原样获取内容。
用innerHTML ，获取的内容如果包含html 会转移。
通过js方式来设置内容：
textarea.value = `` 都可以使用
textarea.innerText = `` 都可以使用
textarea.innerHTML= `` 都可以使用
<body> <!-- 文本框 --> <input type="text" class="name"> <!-- 复选框 --> <input type="checkbox" class="isarg"> 同意 <!-- 按钮 --> <button>发送验证码</button> <!-- 下拉列表 --> <select> <option>春</option> <option>夏</option> <option>秋</option> <option>冬</option> </select> <!-- 文本域 --> <textarea><h1>小乖乖</h1></textarea> <script> //-------------------文本框-------------------------------- let nameDom = document.querySelector('.name') //.innerHTML innerText 主要是设置双标签的 //设置文本框的文本你内容 .value nameDom.value = '六一' //-------------------复选框-------------------------------- let isargDom = document.querySelector('.isarg') //多选框 选择或者取消选择 .checked isargDom.checked = true; //选择 // isargDom.checked = false; //取消选择 //--------------------按钮------------------------------- let btnDom=document.querySelector('button') btnDom.disabled= true;// 禁用 // code.disabled = false; // 启用 //--------------------下拉列表------------------------------- let selDom =document.querySelector('option:nth-child(3)') //下拉列表。selected = true selDom.selected = true; //选中 false取消选中 //--------------------文本域------------------------------- let areaDom = document.querySelector('textarea') // 在html想要设置 文本域的内容 直接在标签内写即可 // <textarea> 小乖乖 </textarea> // 获取文本域中的值 // console.log(textarea.value); // 获取 OK <h1>小乖乖</h1> // console.log(textarea.innerText); // 获取 不OK // console.log(textarea.innerHTML); // 获取 OK <h1>小乖乖</h1> // value 有区别 innerHTML // 设置 textarea 里面文本的内容的时候 // 可以选择 在标签内写文本即可 // 想要获取 内容 // .value 原样获取内容 // .innerHTML 获取的内容如果包含html 会转译 // 通过js的方式来设置内容 // textarea.value=`<h1>标题</h1>`; // ok // textarea.innerText=`<h1>标题</h1>`; // ok // textarea.innerHTML=`<h1>标题</h1>`; // ok </script> </body>
定时器
开启（设置）定时器
let timeId = setInterval(函数，间隔事件-单位毫秒)
（定时器会返回一个id）
<script>
/*
//函数负责定时执行的业务
function getText(params) {
console.log("千金");
}
//每隔一秒执行一次函数
//时间单位 毫秒 1000毫秒=1秒
//配合具名函数 函数名后面不用跟括号 加括号表示取返回值！！
setInterval(getText,1000) */
//-----配合匿名函数使用
//setInterval（匿名函数，时间）
setInterval(function () {
console.log("千金");
},1000)
</script>
清除（停止）定时器
clearInterva(timeId)
<script>
let i = 0 ;
//创建定时器的同时 返回了定时器ID
let timeId = setInterval(function () {
i++;
console.log('千金',i);
//判断是否满足条件
if (i === 120){
//满足就停止
clearInterval(timeId)
}
},100)
</script>
