- DOM 簡介
- DOM 操作HTML
- DOM 操作CSS
- DOMEventListener(句柄)
DOM簡介
dom.png
DOM 操作HTML
DOM操作HTML.png
操作HTML.png
<body>
<p id="pid">hello</p>
<button onclick="demo()" >annniu</button>
<script>
function demo() {
document.getElementById("pid").innerHTML = "nidaye";
}
</script>
<body>
<a id="aid" >hello</a>
<button onclick="demo()" >annniu</button>
<script>
function demo() {
document.getElementById("aid").;
document.getElementById("aid").innerHTML = "echo";
document.getElementById("imgid").src ="2.jpg";
}
</script>
通過DOM操作CSS
1.通過DOM對象改變CSS 語法：document.getElementById(id).style.property = new style
<body>
<div id="id">
hell0
</div>
<button onclick="demo()">按鈕</button>
<script>
function demo() {
document.getElementById("id").style.color ="blue";
}
</script>
DOMEventListener
方法：
addEventListener(): 方法用于向指定元素添加事件句柄
removeEventListener():移除方法添加的事件句柄
<body>
<p id="pid">Hello</p>
<button id="btn" >按鈕</button>
<script>
document.getElementById("btn").addEventListener("click",function () {
alert("hello");
})
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>
