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

标题: 2022-11-7 王嘉乐前端 [打印本页]

作者: yousay！ 时间: 2022-11-8 00:06
标题: 2022-11-7 王嘉乐前端
一、今日学习内容
获取标签对象的主要方式
获取html元素

h4--理解
document.getElementById('id');---节点
document.getElementsByClassName('className');----节点的集合
document.getElementsByTagName('tagName');----节点的结合

document.getElementsByName('name');----NodeList---数组

h5---掌握
document.querySelector('选择器');--符合要求的第一个元素
document.querySelectorAll('选择器');---复合要求的所有的元素---NodeList--数组
控制标签内容
值---文本内容----掌握

1.文本内容
innerText
innerHTML
textContent

2.表单标签的值
value
控制style样式
dom.style.属性名='属性值';
当属性名中有'-'，在js中需要使用小驼峰命名法
background-color====>backgroundColor

dom.style.border='1px solid #ccc';

添加到标签的style属性中
控制class
dom.className='class名'
事件四要素事件源：谁来触发--标签
事件类型：什么事件？鼠标事件，键盘事件
事件处理函数：触发事件之后要进行的行为
事件对象：事件发生时的相关信息都保存到事件对象中

添加事件
dom.addEventListener('事件名称',事件处理函数)

dom.addEventListener('click', function (event) {
// console.log(event);
// 事件源
console.log(event.target);
// 事件类型
console.log(event.type);

// 点击的坐标值
console.log(event.clientX);
console.log(event.clientY);
})

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