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