DOM对象能干什么？
【摘要】 什么是DOM对象？DOM对象其实就是一棵由元素对象组成的大树。另外要特别强调一点，浏览器解析网页的顺序是从上到下的。所以有时要注意js代码与被控制元素对象的前后关系。处理DOM对象时，要确保网页完全加载后再执行，这一点至关重要，因为网页没有加载完的话，那么DOM对象就不会存在，因为它是一棵大树，树还没长成自然就不会有DOM对象啦。拥有DOM对象你可以做以下几件事：
1...
什么是DOM对象？DOM对象其实就是一棵由元素对象组成的大树。另外要特别强调一点，浏览器解析网页的顺序是从上到下的。所以有时要注意js代码与被控制元素对象的前后关系。处理DOM对象时，要确保网页完全加载后再执行，这一点至关重要，因为网页没有加载完的话，那么DOM对象就不会存在，因为它是一棵大树，树还没长成自然就不会有DOM对象啦。拥有DOM对象你可以做以下几件事：
1.获取内容（文件或HTML）
<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <body> <p id="pid">Hello world! I am your master!</p> <script> var dom = document.getElementById("pid"); //获取内容 alert(dom.innerHTML); </script> </body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.修改内容
<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <body> <p id="pid">Hello world! I am your master!</p> <script> var dom = document.getElementById("pid"); //修改元素内容 dom.innerHTML = "<h1>Green world!</h1>"; //获取内容 alert(dom.innerHTML); </script> </body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
3.添加特性
<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <style> .redText{ color:red; } </style> <body> <p id="pid">Hello world! I am your master!</p> <script> var dom = document.getElementById("pid"); //修改元素内容 dom.innerHTML = "<h1>Green world!</h1>"; //给p元素添加一个样式redText dom.setAttribute("class","redText"); //获取内容 alert(dom.innerHTML); </script> </body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
4.获取特性
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <style> .redText{ color:red; } </style> <body> <p id="pid">Hello world! I am your master!</p> <script> var dom = document.getElementById("pid"); //修改元素内容 dom.innerHTML = "<h1>Green world!</h1>"; //给p元素添加一个样式redText dom.setAttribute("class","redText"); //获取特性 alert(dom.getAttribute("class" )); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
5.修改特性
修改特性其实就是重新设定。
<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <style> .redText{ color:red; } .blueText{ color:blue; } </style> <body> <p id="pid" onclick="changeColor()">Hello world! I am your master!</p> <script> var dom = document.getElementById("pid"); dom.setAttribute("class","redText"); //修改元素内容 dom.innerHTML = "<h1>Green world!</h1>"; //获取内容 alert(dom.innerHTML); //获取特性 alert(dom.getAttribute("class")); function changeColor(){ //修改特性 this.dom.setAttribute("class","blueText"); } </script> </body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
6.删除特性
<!doctype html>
<html lang="en"> <head> <meta charset="utf-8"> <title>My First JavaScript</title> </head> <style> .redText{ color:red; } .blueText{ color:blue; } </style> <body> <p id="pid" ondblclick="removeAttr()" onclick="changeColor()">Hello world! I am your master!</p> <script> var dom = document.getElementById("pid"); dom.setAttribute("class","redText"); //修改元素内容 dom.innerHTML = "<h1>Green world!</h1>"; //获取内容 alert(dom.innerHTML); //获取特性 alert(dom.getAttribute("class")); function changeColor(){ //修改特性 this.dom.setAttribute("class","blueText"); } function removeAttr(){ //删除特性 this.dom.removeAttribute("class"); } </script> </body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
谢谢阅读。
文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_40763897/article/details/87983336
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）