获取元素
根据ID获取
document.getElementById("")
- 因为文档页面从上往下加载，所以script在标签下面
- id是大小写敏感的字符串
- console.dir打印返回的元素对象
根据标签名获取
document.getElementsByTagName("标签名") // 返回的是伪数组
element.getElementsByTagName("标签名")
// 父元素必须是单个对象（必须指明是哪一个元素）
var ol = document.getElementByTagName('父元素名')
ol[0].getElementByTagName('子标签名')
通过HTML5新增的方法获取
document.getElementsByClassName("类名"); // 根据类名返回元素集合
document.querySelector("选择器"); // 根据指定选择器返回第一个元素对象
- 选择器需要遵守对应语法
document.querySelectorAll // 返回指定选择器的所有元素集合
获取body和html元素
document.body // 返回body元素
document.documentElement // 返回html元素对象
事件基础
| 三要素 | 功能 |
|---|---|
| 事件源 | 事件被触发的对象 |
| 事件类型 | 如何触发事件，比如需要鼠标点击或者键盘按下等 |
| 事件处理程序 | 通过一个函数赋值的方式完成 |
操作元素
改变元素内容
element.innerText
- 从起始位置到终止位置的内容，但它去除html标签，同时去掉空格和换行
element.innerHTML // 用的更多
- 起始到终止的所有内容，保留空格和换行
<body>
<button>显示系统时间</button>
<div>时间</div>
<script>
//当我们点击按钮，div会发生变化
var btn = document.querySelector('button')
var div = document.querySelector('div')
//注册事件
btn.onclick = function() {
// div.innerText = '2022.3.23'
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['日','一','二','三','四','五','六']
var day = date.getDay();
return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
}
</script>
</body>
修改元素属性
// 处理程序
对象.需要处理的属性 = "";
修改表单属性
- 表单里的值是通过value来修改的
input.value = "";
- 表单的禁用为disabled
btn.disabled = true;
在操作元素时，事件源可以用this来指代
this.diabled = true;
修改样式元素
element.style.样式名 = "属性值"; // 改变元素的样式
element.className = "类名" // 直接修改元素的类名，改为不同的样式，不可逆
- 直接修改时可以使用多类名的方法
排他思想
注意顺序
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式（留下我自己）
自定义属性的操作
- 获取属性值
方法1：element.属性;
方法2：element.getAttribute("属性");
// 区别：方法2可获取自定义的属性值
- 设置属性值
element.属性 = "值";
elemment.setAttribute("属性","值");
- 移除属性
element.removeAttribute("属性")；
H5自定义属性
// H5规定自定义属性data-开头作为属性名并赋值
- 设置属性值
// 例如对于自定义的data-index
element.dataset.index
element.dataset[""]
// 对于多个-构成的自定义属性，用驼峰命名法设置，例如data-list-name
element,dataset.listName
3979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
