- 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" href="http://www.baidu.com">hello</a>
<button onclick="demo()" >annniu</button>
<script>
function demo() {
document.getElementById("aid").href ="http://www.app-echo.com";
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>
