JS常用方法总结--DOM对象篇

个人学习笔记

一、HTML DOM 基础知识：

1、DOM 节点

HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

2、方法和属性介绍：

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。
HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

二、DOM对象常用方法：

1、获取元素（ID、class、html标签、name属性）

document.getElementById('myid');  // 通过ID选取元素

document.getElementsByClassName('myclass')[0]; // 通过class选取元素

document.getElementsByTagName("div")[0]; // 通过html标签选取元素

document.getElementsByName("x")[0];  // 通过表单name属性获取元素（常用于表单）

document.body;             // 返回文档的body元素

document.documentElement; // 返回文档的根元素

2、追加元素（创建标签、文本、属性(样式)、添加节点(标签,文本)、绑定属性）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加元素</title>
<style type="text/css">
.democlass{
    color:red;
}
</style>
</head>
<body>
<p id="demo">单击按钮创建有文本的按钮</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var btn=document.createElement("BUTTON");　　　　　// 创建元素节点（创建一个标签）
    var t=document.createTextNode("CLICK ME");    　　// 创建文本节点（创建一个文本）
    btn.appendChild(t);　　　　　　　　　　　　　　　　 　 // 为元素添加一个新的子元素（将文本节点添加到button元素节点下）
    document.body.appendChild(btn);　　　　　　　　　　  // body节点下添加button元素节点
    var att=document.createAttribute("class");    　　// 创建一个属性节点
    att.value="democlass";                        　　// 属性节点绑定democlass属性值
    btn.setAttributeNode(att);                    　　// 设置或者改变指定属性节点（button元素节点设置democlass属性值） 
};
</script>

</body>
</html>

3、修改DOM元素（html文本、css样式、class属性）

document.getElementById("myid").innerHTML="修改html文本";  // 修改html文本

document.getElementById("myid").style.color="blue";  // 修改css样式

document.getElementById("myid").className ="test";  // 修改class属性

document.getElementById('myid').className = "test demo";  // 多个CLASS属性，即用空格隔开

document.getElementById('myid').className = '';  // 移除该元素上的所有CLASS

注：IE10、谷歌8及更早版本不支持classList，classList和className区别参考：https://www.cnblogs.com/echolun/p/11325782.html

document.getElementById('myid').classList.item(0); //获取索引是0的类名

document.getElementById('myid').classList.length; //只读属性

document.getElementById('myid').classList.add('newClass'); //添加class，常用

document.getElementById('myid').classList.remove('newClass'); //移除class，常用

document.getElementById('myid').classList.toggle('newClass'); //相互切换，有则移除切换，没有则添加

document.getElementById('myid').classList.contains('newClass'); //判断是否存在该class

4、标签属性（获取、设置、移除、是否存在）

document.getElementById("myid").属性名称; // 通过名称获取属性的值，只能获取固有属性，class属性也获取不了

document.getElementById("myid").getAttribute("属性名称"); // 通过名称获取属性的值，不管是固有属性还是自定义属性，返回属性名称对应的属性值

document.getElementById("myid").setAttribute("属性名称","属性值"); // 创建或改变某个新属性,没有返回值

document.getElementById("myid").removeAttribute("属性名称"); // 删除指定的属性，没有返回值

document.getElementById("myid").hasAttribute("属性名"); // 判断是否有指定属性存在，有返回true，没有返回false

document.getElementById("myid").attributes; // 返回指定节点属性的集合

document.getElementById("myid").getAttributeNode("属性名称"); 
// getAttribute()：返回属性值，是一个文本字符串
// getAttributeNode("属性名"）:返回属性节点，是一个对象，要通过.nodeName取节点名称/.nodeType类型/.nodeValue值
// setAttributeNode()和removeAttributeNode()相同

5、节点层次（父节点、子节点、兄弟节点、第一和最后一个节点）

document.getElementById("myid").parentNode; // 返回某节点的父节点

document.getElementById("myid").childNodes; // 获取所有的子节点（包括了文本节点、注释节点），基本不常用

document.getElementById("myid").children; // 获取所有的子节点（只有元素节点）

document.getElementById("myid").nextSibling; // 下一个兄弟节点（包括文本节点、注释节点）

document.getElementById("myid").nextElementSibling; // 下一个兄弟元素节点（不包括文本节点、注释节点）

document.getElementById("myid").previousSibling; // 上一个兄弟节点（包括文本节点、注释节点）

document.getElementById("myid").previousElementSibling; // 上一个兄弟元素节点（不包括文本节点、注释节点）

document.getElementById("myid").firstChild; // 返回被选节点的第一个子节点（包括文本节点、注释节点）

document.getElementById("myid").firstElementChild; // 返回被选节点的第一个子节点（不包括文本节点、注释节点）

document.getElementById("myid").lastChild; // 返回被选节点的最后一个子节点（包括文本节点、注释节点）

document.getElementById("myid").lastElementChild; // 返回被选节点的最后一个子节点（不包括文本节点、注释节点）

6、节点操作（复制、删除、添加、插入、替换）

document.getElementById("myid").cloneNode(true); // 复制节点，参数为True，深度克隆，克隆当前对象的一切子节点；为false，浅克隆，只会克隆标签，不包含文本信息

document.getElementById("myid").removeChild("节点对象"); // 删除节点

document.getElementById("myid").appendChild("节点对象"); // 添加节点

document.getElementById("myid").insertBefore("要插入的节点对象","要添加新的节点前的子节点(位置)"); // 插入节点

document.getElementById("myid").replaceChild("要插入的节点对象","要移除的节点对象"); // 替换节点

7、事件注册三种方式

7.1 行内式：（用的不多）

<div id="box" style="width: 100px; height: 100px; "></div>
<input type="button" value="点击切换颜色" onclick="toggle();">
<script>
     var box = document.getElementById("box");
     function toggle() {
         box.style.backgroundColor = "#f00";
     }
</script>

7.2 内嵌式--on：

<div id="box" style="width: 100px; height: 100px; "></div>
<input type="button" value="点击切换颜色" id="btn">
<script>
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        box.style.backgroundColor = "#f00";
    }
</script>

7.3 内嵌式--addEventListener：

用法：element.addEventListener(event, function, [useCapture])

event：事件名称（注意是不带on）

function：事件函数

[useCapture]：是否捕获，默认false（冒泡），true（捕获）

<input type="button" value="点击" id="btn"/>
<script>
     var btn = document.getElementById("btn");
     btn.addEventListener("click", function () {
         alert("我说：哈哈哈");
     },false);
     btn.addEventListener("click", function () {
          alert("她说：23333");
     }, false);
     //两次事件都会执行，这是区别于on方式的
</script>

7.3.1 addEventListener事件移除：

用法：element.removeEventListener(event, function, useCapture)

event：要移除的事件名称

function：要移除的事件函数

[useCapture]：是否捕获，默认false（冒泡），true（捕获）

8、常用事件

事件名	事件具体用法
鼠标事件
onclick	鼠标单击时触发的事件
ondblclick	鼠标双击时触发的事件
onmousedown	鼠标按下时触发此事件
onmouseup	鼠标按下后松开鼠标时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseover	鼠标移动到某对象范围的上方时触发此事件，支持冒泡
onmouseout	鼠标离开某对象范围时触发此事件，支持冒泡
onmouseenter	鼠标指针移动到元素上时触发，不支持冒泡
onmouseleave	鼠标移出元素时触发，不支持冒泡
键盘事件
onkeypress	键盘上的某个键被按下并且释放时触发此事件
onkeydown	键盘上某个按键被按下时触发此事件
onkeyup	键盘上某个按键被按放开时触发此事件
页面相关事件
onscroll	浏览器的滚动条位置发生变化时触发此事件
onload	页面内容完成时触发此事件(包括图片、css文件等等)
onbeforeunload	当前页面的内容将要被改变时触发此事件（刷新或关闭）
onerror	出现错误时触发此事件
onresize	当浏览器的窗口大小被改变时触发此事件
onunload	当前页面将被改变时触发此事件
表单相关事件
onfocus	获得焦点时触发此事件
onblur	失去焦点时触发此事件
onchange	元素内容发生改变，且失去焦点时，触发此事件( <input>, <keygen>, <select>, 和 <textarea>)
oninput	元素内容发生变化，立即触发此事件( <input> 和 <textarea>)
onsubmit	一个表单被递交时触发此事件
onreset	当表单中reset的属性被激发时触发此事件
onselect	文本框中的文本被选中时发生
onsearch	按下"ENTER（回车）" 按键或点击 type="search" 的 <input> 元素的 "x(搜索)" 按钮时触发
剪贴板事件
oncopy	用户拷贝元素内容时触发
oncut	用户剪切元素内容时触发
onpaste	用户粘贴元素内容时触发
拖动事件
ondrag	当某个对象被拖动时触发此事件 [活动事件]
ondragend	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter	当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart	当某对象将被拖动时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件

9、事件对象

9.1 事件对象：事件触发之后，对事件描述的信息集合

9.2 常见事件参数

9.3 冒泡和捕获

9.4 阻止事件传播

9.5 事件委托

9.6 阻止默认行为

事件对象参考：https://www.cnblogs.com/dcyd/p/12482989.html

posted @ 2021-09-13 16:01 天黑请闭眼、阅读(592) 评论(0) 收藏举报

刷新页面返回顶部

天黑请闭眼、