Document Object Model文档对象模型_how to get the second child node of the document o-CSDN博客

本文链接：https://blog.csdn.net/qq_46416772/article/details/125247554

1. 作用：

（1）查找HTML元素：

通过id名 document.getElementById("");

通过类名 document.getElementByClassName("");

通过标签名 document.getElementByTagName("");

（2）改变HTML元素内容：

element.innerHTML="";

（3）改变HTML元素属性：

  element.attribute="";

element.setAttribute(attribute, value);

（4）改变CSS样式：

element.style.property="";

（5）创建、添加、替换和删除元素：

document.createElement(element);

doucument.appendChild(element);

doucument.replaceChild(old,new);

doucument.removeChild(element);

（6）改变HTML输出流：

document.write();

（7）添加事件处理程序：

element.event = function(){code};

2. 事件：

（1）鼠标事件：

        onclick点击、ondblclick双击

        onmouseover移到元素之上onmouseenter

         onmouseout从元素上移开onmouseleave

onmouseup松开按键、onmousedown按下按键

（2）键盘事件：

onkeydown按下、onkeypress按下并松开、onkeyup松开

（3）框架/对象事件：

onerror发生错误、onabort加载中断

        onload完成加载、onunload退出页面、onbeforeunload即将离开页面

onpageshow访问页面、onpagehide跳转页面、onhashchange当前URL部分修改

onresize窗口调整大小、onscroll滚动

（4）表单事件：

onchange被改变、onblur失去焦点、onfocus获取焦点…

（5）剪贴板事件、打印事件

（6）拖动事件：

        ondrag正在拖动、ondrop放置在目标区域…

（7）多媒体事件：

onpause暂停、onplay开始播放…

（8）动画事件、过渡事件

（9）其他事件：

onshow显示、onwheel滚轮滚动

3. 事件监听:

（1）事件属性event.target：返回触发此事件的元素。

（2）注册监听事件element.addEventListener("event",function,useCapture[true|false]);

移除监听事件element.removeElementListener("event",function);

（3）事件传递：定义元素事件触发的顺序。

两种方式：冒泡（先内后外）、捕获（先外后内）

4. DOM元素（节点）：

（1）类型：

1.文档节点：整个html文档

2.元素节点：标签

3.属性节点：元素的属性

4.文本节点：文本内容

（2）属性：

1.nodeName：#document、标签名、属性名、#text

2.nodeType：9、1、2、3

3.nodeValue：null、null、属性值、文本内容

（3）导航：

<html>根节点、<head>第一个子节点、<body>最后一个子节点

parentNode父节点
childNodes[nodenumber]所有子节点，会获取空白文本
firstChild第一个子节点
lastChild最后一个子结点
nextSibling下一个兄弟节点
previousSibling前一个兄弟节点

5. HTMLCollection集合 & NodeList节点列表：

（1）集合：var c = document.getElementByTagName("p");

（2）节点列表：var nl = document.querySelectorAll("p");

（3）共同点：1. 类数组 2.索引号访问 3.length属性

（4）区别：只有 NodeList 对象能包含属性节点和文本节点。