DOM的重要核心

htmledit_views">

DOM的创建

1.document.write

2.innerHTML

3.createElement

2.增加

3.删除

4.改

5.查

6.属性操作

7.事件操作

8.注册事件

8.1传统注册方式

8.2addEventListener事件监听方式

基本语法

监听点击事件

监听多个事件

移除事件监听器

DOM的创建

1.document.write

用途：document.write() 方法直接向 HTML 文档中写入内容。如果文档已经加载完成（即页面已经加载完毕），使用 document.write() 会覆盖整个页面的内容

2.innerHTML

用途：innerHTML 属性用于获取或设置元素的HTML内容

html" title=javascript>javascript">document.getElementById('myDiv').innerHTML = '<p>这是一个新的段落。</p>';

3.createElement

用途：createElement() 方法用于动态创建新的DOM元素

html" title=javascript>javascript">var newElement = document.createElement('p');  
newElement.textContent = '这是一个新的段落。';  
document.body.appendChild(newElement);

区别

innerHTML比document.write()更加灵活，因为它允许你精确地控制DOM的某一部分，而不是整个页面。
与innerHTML相比，createElement提供了更细粒度的控制，因为它允许你逐个创建和配置元素，然后再将它们添加到DOM中。这对于构建复杂的DOM结构特别有用。

2.增加

1.appendChild

html" title=javascript>javascript">   var p=document.createElement("p");//添加元素节点 node.appendChild(newNode)document.body.appendChild(p);p.appendChild(document.createTextNode("我是新创建的节点"));

2.insertBefore

html" title=javascript>javascript">    ul.insertBefore(li,ul.children[0]);

3.删除

parentNode .removeChild

html" title=javascript>javascript">   for(var i=0;i<a.length;i++){a[i].onclick=function(){var li=this.parentNode;ul.removeChild(li);}

4.改

参考文章https://mp.csdn.net/mp_blog/creation/editor/141200432

主要修改dom的元素属性, dom元素的内容、属性,表単的值等

1. 修改元素属性: src、 href、 title等

2.修改普通元素内容: innerHTML、 innerText

3.修改表単元素: value、type、 disabled等

4.修改元素祥式: style、 className

5.查

主要获取查询dom的元素

1. DOM提供的API方法: getElementByld、 getElementsByTagName 古老用法不太推荐

2. H5提供的新方法 : querySelector、 querySelectorAll 提倡

3.利用子节点操作获取元素：父（parentNode）、子（ childern）、兄（previousElementSibling 、nextElementSibling）

6.属性操作

主要针対于自定义属性。

1.setAttribute(attributeName, value):设置dom的属性値

html" title=javascript>javascript">var elem = document.getElementById("myElement");  
elem.setAttribute("title", "这是新的标题");

2. getAttribute(attributeName) :得到dom的属性値

html" title=javascript>javascript">var elem = document.getElementById("myElement");  
var title = elem.getAttribute("title");  
console.log(title); // 输出：这是新的标题

3. removeAttribute(attributeName)移除属性

html" title=javascript>javascript">var elem = document.getElementById("myElement");  
elem.removeAttribute("title");

7.事件操作

鼠标事件

鼠标事件	触发条件
click	点击
dblclick	双击
mousedown	鼠标按下
mouseup	鼠标松开
mousemove	鼠标移动
mouseenter	鼠标进入元素
mouseleave	鼠标离开元素
contextmenu	网页中禁止鼠标右键菜单和禁止选中文字

鼠标事件补充：

通过CSS：对于不支持selectstart事件的浏览器，你可以使用CSS的user-select属性来禁止选中文本
selectstart禁止选中文字事件

html" title=javascript>javascript"><head>  <title>禁止右键和选中</title>  <style>  body {  -webkit-user-select: none; /* Chrome, Safari, Opera */  -moz-user-select: none;    /* Firefox */  -ms-user-select: none;     /* IE 10 and IE 11 */  user-select: none;         /* Standard syntax */  }  </style>  <script>  document.addEventListener('DOMContentLoaded', function() {  // 禁止整个文档的右键菜单  document.body.addEventListener('contextmenu', function(e) {  e.preventDefault();  }, false);  // 禁止整个文档的文本选中（虽然CSS已经处理了大部分情况）  document.body.addEventListener('selectstart', function(e) {  e.preventDefault();  }, false);  });  </script>  
</head>  
<body>  <p>这里不能右键，也不能选中文字。</p>  
</body>

鼠标事件对象

常用属性

鼠标事件对象包含了许多有用的属性，以下是一些最常用的：

常见属性	说明
type	返回事件的类型，如 `"mouseenter"`, `"mouseleav“`等
target	返回触发事件的元素
currentTarget	返回其事件监听器触发该事件的元素
clientX/clientY	鼠标指针在视口中的X和Y坐标（不包括滚动条滚动的部分）
pageX/pageY	鼠标指针在页面上的X和Y坐标（包括滚动条滚动的部分）
`screenX` 和 `screenY`	鼠标指针在屏幕上的X和Y坐标
`button`	指示哪个鼠标按钮被点击
`ctrlKey`、`shiftKey`、`altKey`、`metaKey` （在Mac上是Cmd键，在Windows上是Windows键）	表示事件发生时是否同时按下了这些修饰键

代码示例

html" title=javascript>javascript">console.log('鼠标的clientX坐标:', event.clientX);  console.log('鼠标的clientY坐标:', event.clientY);  console.log('鼠标的pageX坐标:', event.pageX);  console.log('鼠标的pageY坐标:', event.pageY);

键盘事件

键盘事件	触发条件
keydown	键盘按下
keyup	键盘松开
keypress	按键被按下并释放一个键

keydown 和keypress区别：

keydown下键盘上的任意键时触发，keypress对于功能键不触发
大小写敏感性：keypress事件能够区分字母的大小写（它返回的是字符的ASCII码值），而keydown事件则不区分（它返回的是按键的物理码，将大写和小写视为同一个键）

代码示例

html" title=javascript>javascript">    <script>// 键盘按下事件document.addEventListener('keydown', function(e) {if(e.key === 'Enter'){alert('按下了回车键');}})//  键盘按住事件document.addEventListener('keyup', function(e) {if(e.key === 'Shift'){alert('按住了Shift键');}   else if(e.key === 'Control'){alert('按住了Control键');}   else if(e.key === 'Alt'){alert('按住了Alt键');}})// // ��标按下事件document.addEventListener('keypress', function(e) {if(e.key === 'a'){alert('按下了a键');}   else if(e.key === 'b'){alert('按下了b键');}   else if(e.key === 'c'){alert('按下了c键');}})</script>

键盘事件属性

键盘事件对象	说明
key	返回一个表示实际按下的键的字符串
code	返回一个表示按键物理位置的字符串
altKey、ctrlKey、shiftKey、metaKey（在Mac上是Cmd键，在Windows上是Windows键）	这些布尔属性表示事件发生时是否按下了对应的修饰键
charCode（仅限keypress事件）	在keypress事件中，这个属性表示按键的Unicode字符编码
location	表示按键在物理键盘上的位置（如果有多个相同类型的键，如左右两侧的Shift键）
repeat（仅限keydown事件）	如果事件是由于用户持续按住键而产生的自动重复，则为true；否则为false

表单事件

表单事件	触发条件
focus	元素获得焦点
blur	元素失去焦点
change	表单元素的内容改变

页面事件

页面事件	触发条件
load	页面加载完成
resize	窗口大小改变
scroll	页面滚动