DOM操作
2023-04-07 08:30:12 0 举报AI智能生成
学习笔记
作者其他创作
大纲/内容
DOM对象获取
1.调用docment对象的getElementByXXX()的方法进行元素的获取
获取常规元素的方式
getElementById(); // 根据id获得一个元素对象
html中的id主要是给js用的，css不推荐使用id
var name = document.getElementById('name');
getElementsByTagName(); // 根据标签名获得某些元素的对象数组
var divs = document.getElementsByTagName('div');
getElementsByClassName(); // 根据类名获得某些元素的对象数组
var boxs = document.getElementsByClassName('box');
getElementsByName(); // 根据标签的name属性获得某些元素的对象数组
主要针对表单标签
var boxs = document.getElementsByName('gender');
// Html5新增的
querySelector(); // 返回指定选择器的第一个元素对象
querySelector(); // 返回指定选择器的第一个元素对象
var nav = document.querySelector('#nav');
var box = document.querySelector('.box');
var li = document.querySelector('li');
var box = document.querySelector('.box');
var li = document.querySelector('li');
querySelectorAll(); // 返回指定选择器的所有元素对象数组
var allnav = document.querySelectorAll('#nav');
var allbox = document.querySelectorAll('.box');
var allli = document.querySelectorAll('li');
var allbox = document.querySelectorAll('.box');
var allli = document.querySelectorAll('li');
获取特殊元素的方式
// 返回body元素对象
var body = document.body;
var body = document.body;
// 返回html元素对象
var html = document.documentElement;
var html = document.documentElement;
2.利用元素之间的层次关系进行DOM对象的选择【相对的 灵活的】
childNodes属性：获取父元素下的所有子元素，如果有空白会获取到空白
firstChild属性：获取父元素下的第一个子元素，如果有空白会获取到空白
lastChild属性：获取父元素下的最后一个子元素，如果有空白会获取到空白
children属性：获取父元素下的所有子元素，获取实际存在的子元素（推荐使用）
firstElementChild属性：获取父元素下的第一个子元素，获取实际存在的子元素（推荐使用）
lastElementChild属性：获取父元素下的最后一个子元素，获取实际存在的子元素（推荐使用）
parentNode属性：获取某个子元素的父元素
previousElementSibling：获取紧邻它的上一个兄弟元素，获取实际存在的兄弟元素（推荐使用）
nextElementSibling：获取紧邻它的下一个兄弟元素，获取实际存在的兄弟元素（推荐使用）
DOM对象操作
操作对象内容
innerText // 获取或设置双标签元素的文本内容
innerHTML // 获取双标签元素的文本内容或设置双标签元素文本中包含html标签的内容
操作对象属性
setAttribute("属性名", "属性值") // 设置元素的属性，针对任何标签，如果属性名存在，则覆盖，如果属性名不存在，则新建
getAttribute("属性名") // 根据元素的属性名获取元素的属性值
checked // 获取或设置选项的选中状态，类型为一个boolean值
value // 用来动态获取或设置表单元素value的值
className // 用来动态获取或设置表单元素class的值
DOM对象事件
click // 当元素被点击时触发
HTML标签中写
<button onclick="myFunction()">点击</button>
<script>
function myFunction() {
alert("被点击了");
}
</script>
function myFunction() {
alert("被点击了");
}
</script>
JS脚本中写
<script>
var obj = document.getElementById("car");
obj.onclick = function () {
alert("被点击了");
}
</script>
var obj = document.getElementById("car");
obj.onclick = function () {
alert("被点击了");
}
</script>
mouseenter // 当鼠标移动到元素上时触发
mouseleave // 当鼠标从元素上移出时触发
mousemove // 当鼠标在元素上方移动时触发
mouseover // 当鼠标移动到元素或其子元素上时触发
mouseout // 当鼠标从元素或其子元素上移出时触发
keydown // 当用户按下键盘上的任意键时触发
keyup // 当用户松开键盘上任意键时触发
load // 当文档或图像加载完成时触发，可以确保代码执行时所有的DOM对象已经加载完毕
change // 当元素的值发生改变时触发
focus // 在元素获得焦点时触发
blur // 在元素失去焦点时触发
动态的元素添加和移除
createElement(element); // 创建 HTML 元素
removeChild(element); // 删除 HTML 元素
appendChild(element); // 添加 HTML 元素
replaceChild(element); // 替换 HTML 元素
window对象的常用方法
alert(message); // 浏览器弹出提示消息，无返回值
alert("我是一个警告框！");
prompt("sometext", "defaultText"); // 浏览器弹出输入框，用户可以输入，如果用户单击“确定”，该框返回输入值，返回类型是string。如果用户单击“取消”，该框返回 NULL，返回类型是object
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}
parseInt(); // 转整数
parseFloat(); // 转小数
confirm("sometext"); // 浏览器弹出确认框，用户进行选择，如果用户单击“确定”，该框返回 true，boolean类型。如果用户单击“取消”，该框返回 false，boolean类型
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认！";
} else {
x = "您按了取消！";
}
if (r == true) {
x = "您按了确认！";
} else {
x = "您按了取消！";
}
setInterval(function, milliseconds); // 开启一个定时器，按照指定的时间间隔自动的反复执行某段代码，返回定时器的唯一标识
clearInterval(timeoutVariable); // 停止定时器，参数timeoutVariable表示定时器的唯一标识
setTimeout(function, milliseconds); // 延迟执行
0 条评论
下一页
