一、今日学习内容
获取标签对象的主要方式
获取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);
})
|
