DOM基础测试(对象 属性 方法)
1.如何获取 DOM 对象
第一类:特殊对象
document.body //body对象
document.documentElement //根标签
第二类:get方法
document.getElementById('id');
document.getElementByClassName('className'); //返回值类数组
document.getElementByTagName('标签名'); //返回值类数组
第三类:query方法(H5之后出现的两种获取元素的方式)
document.querySelector('css选择器'); //返回的是css选择器的第一个值
document.querySelectorAll('css选择器'); //返回的是所有被查找的元素 是一个类数组;
第四类:间接通过关系获取对象
父子关系获得父级对象 或子级对象
兄弟关系获得兄弟对象
2.常用属性
style 属性: 背景 边框和边距 布局 列表 杂项 定位 打印 滚动条 表格 文本 规范
innerHTML 属性:获取双闭合标签里的内容(识别标签)
innerText 属性 :获取双闭合标签里的内容(不识别标签,输入什么显示什么)
value 属性: input 元素规定值,不同input标签,value用法不同
* 对于 "button", "reset", "submit" 类型 - 定义按钮上的文本
* 对于 "text", "password", "hidden" 类型 - 定义输入字段的初始（默认）值
*对于 "checkbox", "radio", "image" 类型 - 定义与 input 元素相关的值。该值会发送到表单的action url.
checked 属性: 表示是否被选中的状态,常与单选框和复选框配合使用
src 属性:图像文件的 URL，该图像文件的的绝对路径或相对路径。
3.关系属性
//获取父节点
parentNode:子元素的父节点
//获取子节点
firstChild:第一个子节点(所有节点)
firstElementChild:第一个子节点(标签节点)
lastChild:最后一个子节点(所有节点)
lastElementChild:最后一个子节点(标签节点)
childNodes:所有子节点(所有节点)
children:所有子节点(标签节点)
//获取兄弟节点
previousSibling:上一个兄弟节点(所有节点)
previousElementSibling:上一个兄弟节点(标签节点)
nextSibling:下一个兄弟节点(所有节点)
nextElementSibiling :下一个兄弟节点(标签节点)
//获取除自己以外的所有兄弟节点:
var children = pNode.children; //找到所有
for (var i = 0; i < children.length; i++) {
if (children[i] !== el) { //去除自己
siblings.push(children[i]);
}
4.自定义属性
data-key是开发人员自己定义的属性,通过data-key的方式接收值,供我们操作
data-key自定义属性存在于dom对象的dataset属性中 格式是key:value;
相对于dom对象节点设置的属性,自定义属性的优点是:可以在标签中显示出来
<ul>
<li class="li" data-color="red" data-name="li">red</li>
<!-- 设置 直接写在标签内部 -->
<li class="li" data-color="yellow">yellow</li>
<li class="li" data-color="orange">orange</li>
<li class="li" data-color="blue">blue</li>
</ul>
<script>
var lis = document.querySelectorAll('ul li');
console.log(lis);
//要求: 将li变成标签内部的指定颜色
// 解决方法:可以通过data-color给标签自定义属性
for(var i= 0;i<lis.length;i++){
// 先获取自定义属性的颜色
// 取值 el.dataset.* el.dataset['*']
// var color = lis[i].dataset.color;
var color = lis[i].dataset['color'];
// 给li的背景色赋值
lis[i].style.backgroundColor = color;
}
</script>
5.常用方法
操作类名
.classList.add() //追加
.classList.remove() //移除
.classList.contains() //查询是否包含
.classList.toggle() //取反
操作属性
通过对象方式赋值(不应在此处 不是方法)
var 属性值 = 对象.属性名 //获取
对象.属性名 = 属性值 //设置
对象.属性名 = " " //删除
通过dom方法
// 对象.getAttribute() //取值
// 对象.setAttribute() //设置
// 对象.removeAttribute() //删除
节点的增删改查
创建节点:
新的标签(元素节点) = document.createElement("标签名");
增加节点:
父节点.appendChild(新的子节点);
父节点.insertBefore(新的子节点, 作为参考的子节点);
删除节点:
父节点.removeChild(子节点);
复制节点:
要复制的节点.cloneNode(); //默认false 浅克隆 true深克隆
6.为DOM元素绑定事件的步骤
获取事件源(DOM)
绑定事件
事件处理程序
7.常见事件类型
onclick
onmouseenter/onmouseleave 事件在鼠标指针移动到或离开元素上时触发
onmousedown/onmousemove/onmouseup
onfocus事件在对象获得焦点时发生/onblur事件会在对象失去焦点时发生
onload 事件在对象被加载后发生
onkeydown/onkeyup
8.绑定事件的三种方式
el.onclick = function(){}
行内绑定
el.addEventListener('click',function(){})
9.捕获和冒泡
当一个事件发生在具有父元素的元素上时，现代浏览器运行两个不同的阶段: 捕获阶段和冒泡阶段。
在捕获阶段：
浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了onclick事件，如果是，则运行它。
然后，它检查<html>中点击元素的下一个祖先元素，并执行相同的操作，然后是点击元素再下一个祖先元素，依此类 推，直到到达实际点击的元素。
冒泡阶段:
浏览器检查实际点击的元素是否在冒泡阶段中注册了onclick事件，如果是，则运行它
然后检查下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。
在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。
注解: 如上所述，默认情况下，所有事件处理程序都是在冒泡阶段注册的，这在大多数情况下更有意义。如果真的想在捕获阶段注册一个事件，那么可以通过使用addEventListener()注册您的处理程序，并将可选的第三个属性设置为true。
10.定时器
setTimeout(function() {
//代码主体
}, 延迟时间毫秒);// 延迟执行
setInterval(function() {
//代码主体
}, 时间毫秒); //循环执行
clearTimeout(要清除的定时器); //清除延迟执行的定时器
clearInterval(要清除的定时器); //清除循环执行的定时器
测试题目
2055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
