什么是DOM?
- DOM 是 Document Object Model（文档对象模型）
- W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
HTML DOM
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM Nodes
- HTML文档就是HTML DOM的节点树
HTML DOM 方法
- HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作
- HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值
getElementById() 方法
- getElementById() 方法返回带有指定 ID 的元素：
let a = document.getElementById("time");
getElementsByTagName() 方法
- getElementsByTagName() 返回带有指定标签名的所有元素
document.getElementsByTagName("p");
The getElementsByClassName() Method
- 查找带有相同类名的所有 HTML 元素
document.getElementsByClassName("intro");
创建HTML内容
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
改变 HTML 样式
document.getElementById("p1").style.color = "blue"
document.getElementById("p1").style.fontFamily = "Arial"//修改字体
使用事件
<input type="button" olick="document.body.style.backgroundColor='yellow'" value="修改背景颜色">
//-----
//引用函数的方法
<script>
function changeColor(){
document.body.style.backgroundColor = 'yellow'
}
</script>
<input type="button" olick="changeColor()" value="修改背景颜色">
//-----
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script>
<input type="button" onclick="ChangeText()" value="修改文本" />
创建新的元素 - createElement()
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
let para = document.createElement('p') //添加一个新段落
let node = document.createTextNode('这是新添加的段落内容')
para.appendChild(node) // 把内容放到段落里
let element = document.getElementById("div1") //获取div1
element.appendChild(para)//吧p标签放到div1里
删除已有的 HTML 元素
要删除元素必须要找到他的父元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
let parent = document.getElementById('div1')
let chile = document.getElementById('p')
parent = removeChile(chile)
//不需要查找父元素删除
let child=document.getElementById("p1")
child.parentNode.removeChild(child)
DOM事件
用户点击
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
----------//函数中调用
<script>
function changeText(id){
id.innerHTML="Ooops!"
}
</script>
<h1 onclick="changeText(this)">
onload事件（用于检查访客的浏览器版本，加载不同方式）
<body onload="checkCookies()"
<script>
function checkCookies(){
if(navigator.cookieEnabled === ture){
alter("Cookie可用")
}
else{
alter("Cookie不可用")
}
}
</script>
onchenge事件
<input type="text" id="fname" onchenge="myFunction()">
<script>
function myFunction(){
let x = document.getElementById("fname")
x.value = x.value.toUpperCase()
}
</script>
onmouseover和onmouseout事件
<div id="a" onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:red;width:200px;height:200px">
<script>
function mOver(obj){
obj.innerHTML="Thank you"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
