对于JavaScript中DOM对象的分析
程序员文章站
2022-04-11 12:18:43
...
1.DOM简介
当网页被加载时，浏览器会创建页面的文档对象模型，即DOM（Document Object Model）。
2.DOM操作HTML
2.1 改变HTML输出流
不要在文档加载完成之后使用document.write（）。会覆盖该文档
2.2 寻找元素
通过id找到HTML元素
通过标签找到HTML元素
2.3 改变HTML内容
使用属性：innerHTML
2.4 改变HTML属性
使用属性：attribute
Object_HTML.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--修改-->
<p id="pid">Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo(){ var nv=document.getElementById("pid");
nv.innerHTML="World";
document.getElementsByName("p");//p如果相同，相同元素的第一个 } </script>
<!--修改属性-->
<br />
<a id="aid" href="http://www.baidu.com">百度</a>
<button onclick="demobd()">跳转</button>
<script>
function demobd(){
document.getElementById("aid").href="index.html";
} </script>
<br />
<img id="iid" src="img/294224.jpg" height="200" width="300"/>
<button onclick="demoimg()">切换</button>
<script>
function demoimg(){
document.getElementById("iid").src="img/308048.jpg";
} </script>
</body></html>
3.DOM操作CSS
通过DOM对象改变CSS
语法：document.getElementById(id).style.property=new style
Object_CSS.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/Object_CSS.css" />
</head>
<body>
<p id="p" class="p">
hello </p>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("p").style.background="blue";
document.getElementById("p").style.color="white";
} </script>
</body></html>
css/Object_CSS.css
.p{
background-color: blueviolet;
height: 200px;
width: 300px;
}
4.DOM EventListener
4.1 DOM EventListenter
方法：addEventListener()
removeEventListener()
4.2 addEventListener()
方法用于指定元素添加句柄
4.3 removeEventListener()
移除方法添加句柄
EventListener.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){
alert("hello");
}); </script>
<button id="btnjb">句柄</button>
<script>
var x=document.getElementById("btnjb");
x.addEventListener("click",hello);
x.addEventListener("click",world);
x.removeEventListener("click",hello); function hello(){
alert("hello");
} function world(){
alert("world");
} </script>
</body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上就是对于JavaScript中DOM对象的分析的详细内容，更多请关注其它相关文章！