使用JS操作DOM对象，通过JS对HTML页面进行增删改查操作

1.JavaScript中操作DOM对象

DOM:Document Object Model
文档对象模型
将HTML文件作为一个对象存在 -->Document

HTML中的每一个标签【元素】都是一个对象 -->Element

HTML中的每一个属性都是一个对象 --> Attribute

HTML中的每一个文本都是一个对象 -->Text

2.JS操作DOM–>通过JS来对HTML页面进行操作[增删改查]

如何通过JavaScript操作HTML?

在JavaScript中已经内置了一个document对象

当浏览器加载完整个HTML页面的时候，就会自动创建一个document对象

1.获得HTML页面中的标签

document.getElementById();

document.getElementsByName();

document.getElementsByTagName();

document.getElementsByClassName();

document.querySelecter("");

document.querySelecterAll("");

拿到父标签

let parent = 子标签对象.parentElement

标签转换成了文档对象

文档 这是超链接

对象

let a={
id:“aa”,

href:“http://www.baidu.com”

textContent:“这是超链接”

}

2.根据标签对象可以获得标签中的属性和文本也可以修改标签中的属性值和文本的值
标签对象名.属性名 = 值;
let value = 标签对象名.属性名;

获得文本

let text = 标签对象名.textContent;
let text = 标签对象名.innerText;
let text = 标签对象名.innerHTML;

修改文本的值
标签对象名.textContent="";
标签对象名.innerText="";
标签对象名.innerHTML="";

3.增加标签
let 子标签 =
document.createElement(“h2”);
父标签.append(子标签);
父标签.appendChild(子标签);

4.移除标签
父标签.removeChild(子标签);

5.事件：在页面上发生了一个操作

鼠标事件：

onmousedown 鼠标按键按下
onmouseup 鼠标按键松开
onmouseenter 光标进入
onmouseout 光标离开
onclick 鼠标按键点击[按下+松开]

键盘事件
onkeypress
onkeydown
onkeyup

框架事件
onload 页面加载完成[页面在浏览器中完成显示过程]
onunload 页面卸载完成[浏览器关闭的时候，先清空浏览器中的页面数据]

表单事件
onblur 表单项失去焦点
onfoucs 表单项获得焦点
onchange 输入框内容发生改变
onsubmit 当提交按钮被点击

事件监听机制
给组件绑定一个监听器，用来监听对应的事件是否发生
监听谁？
监听什么事件？

给组件添加监听器
编写监听函数
function ButtonAddNews(){
alert(“AAAAAAAAAAAA”);
}

给组件绑定事件监听器
添加

事件的绑定方式
1.在标签[组件]中定义一个 属性，属性的值绑定了一个JS代码
添加

2.在JavaScript中动态绑定

let btn = document.querySelecter("");
btn.addEventListener(“事件”,回调函数);
比如：
btn.addEventListener(“click”,function(event){})