JavaScript DOM对象

Posted 2021-01-30 十月要努力

javascript-DOM简介
DOM简介
DOM操作html
DOM操作CSS
DOMEventListener

DOM简介
1、HTML DOM:
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
DOM操作HTML：
1、JavaScript能够改变页面中的所有HTML元素
2、JavaScript能够改变页面中的所有HTML属性
3、JavaScript能够改变页面中的所有CSS样式
4、JavaScript能够对页面中的所有事件做出反应

JavaScript-DOM操作HTML
1、改变HTML输出流：
注意：绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档

<p>hello</p>
<button onclick="demo()"></button>
<script>
function demo(){
document.write("world!");
}
</script>

2、寻找元素：
通过id找到HTML元素 document,getElementById(element)
通过标签名找到HTML元素
3、改变HTML内容：
使用属性：innerHTML
4、改变HTML属性：
使用属性：attribute

JavaScript-DOM操作CSS
通过DOM对象改变CSS，语法：

document.getElementById(id).style.property = new style

 

JavaScript-DOM EventListener
方法一：addEventListener() 方法用于指定元素添加时间句柄
方法二：removeEventListener（） 移除方法添加的事件句柄

<button id="btn">按钮</button>
<script>
var x = document.getElementById("btn");
x.addEventListener("click",hello); //添加句柄
x.addEventListener("click",world);
x.removeEventListener("click",hello);//删除句柄
function hello() {
alert("Hello")
}
function world() {
alert("world")
}
</script>