菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 樊享禹-20230512 [打印本页]

作者: 546437 时间: 2023-5-12 08:54
标题: 樊享禹-20230512
今日学习内容：
1.要操作这个要 div元素就必须拿到它
方案一：使用它的id获取它
<script>
要操作这个div元素就必须拿到它
方案一：使用它的id获取它
getElementById(id) 返回值，就是这个元素对
象，它具有唯一性
const box = document.getElementById('box')
console.log(box)
</script>
方法二：使用class来获取
const apples = document.
getElementsByClassName('apples');
输出类型是HTMLCollection(5) 集合，哪怕只有
一个元素
console.log(apples);
方案三：使用标签名获取元素
首先获取标签，通过getElementsByTagName
(tagname)，返回值是这个元素对象的集合
const lis = document.getElementsByTagName('li');
console.log(lis); //HTMLCollection(5) [li, li, li,
li, li] console.log(lis[0]);
2.html5新增的两种方式新
方法一：使用querySelector(css选择器) ***只会获娶到复核结果的第一个元素
<script>
<div class="" id="box">盒子</div>
<div class="dv">苹果</div>
<div class="dv">橘子</div>
<ul>
<li>面条</li>
<li>米饭</li>
</ul>
<input type="text" placeholder="输入你的年龄">
<input type="password" placeholder="输入你的密码">
<script>
const box = document.querySelector('#box') console.log(box);
const dv = document.querySelector('.dv') console.log(dv);
const ulli = document.querySelector('li') console.log(ulli);
const input = document.querySelector('input [type=password]') console.log(input); 方法二：使用querySelectorAll(css选择器) *** 获得的结果是
Nodelist，获得其中的某一个要使用下标 const lis = document.querySelectorAll('li'); console.log(lis);//NodeList(2) 节点列表
const eat = document.querySelectorAll('ul li')
console.log(eat);//NodeList(2)节点列表
## 获得某个元素需要使用下标获取 ##
console.log(eat[0]);
3.修改元素样式修
<div class="apples">我是一个大苹果</div>
const box = document.querySelector('.apples');
console.log(box); 对该元素进行样式修改通过style属性添加样式是行内样式，优先级高 box.style.width = '200px'; box.style.height = '200px';
box.style.color = 'red';
方法：获取元素的综合写法方 document文档的意思 const ul = document.querySelector ('#u2') console.log(ul) const lis = ul.querySelectorAll ('li')
console.log(lis) const u2 = document.querySelectorAll('#u2'); console.log(u2[0]); const lis = u2[0].querySelectorAll('li') console.log(lis);
页面变色：获取body元素 document.body document.body.style.background = '#000' 获取html元素 document. documentElemen
console.log(document. documentElement) 获取title元素 document. documentElemen console.log(document.title)
className这个属性会直接覆盖元素的原有类名：
const div = document.querySelector('.apples') div.className = 'apples box'
文本元素的可读写文 innerHTML 使用多一些 innerText ;都是可读写的属性
const div = document.querySelector('.apples') console.log(div.innerHTML); console.log(div.innerText); div.innerHTML = '你是我的小苹果'
div.innerHTML = '
功夫熊猫功
' const ul = document.querySelector('ul') console.log(ul.innerHTML) // 会得到所有内容（包括格式和标签） console.log(ul.innerText) //只会得到文
本内容
ul.innerText = '功夫熊猫' ul.innerText = '
功夫熊猫功
'
4.事件事
js是由时间驱动的，事件的绑定（注册）
时间三要素：事件源、事件类型 onclick点击事件、执行的代
码块（执行的处理程序）点击按钮会改变一些样式 const btn = document.querySelector('button') btn.onclick = function() { //*console.log('btn');
btn.style.color = 'red' } 4.1事件的基本使用 style 写入样式 .green { color: skyblue; }
<button>我是一个开关</button>
<button>我是一个按钮</button>
const btns = document.querySelectorAll('button')
btns[0].onclick = function() {
console.log('我是一个开关');
btns[0].style.color = 'red'
}
btns[1].onclick = function() {
console.log('我是一个按钮');
btns[1].className = 'green'
}

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)