网页编程--DOM+HTML

 
  1. <pre>

  2. dom---document object model 文档对象模型

  3. dom技术: 把标记文档变成对象树,通过对这棵树中的对象进行操作(增删改查),实现对文档内容的操作。

  4. 对dom对象树进行增删改查,产生的效果就是对页面内容进行增删改查!

  5. 文档:html页面,xml文档(文件)

  6. </pre>

  7.  
  8. <pre>

  9. dhtml:动态html技术,它不是一门语言,而是一项综合技术: html+css+js+dom

  10. 静态网页:HTML+CSS

  11. 技术边界:

  12. html: 提供标签,对数据进行封装。----目的是便于对该标签中的数据进行操作

  13. css: 提供样式属性,对标签中的数据进行样式定义

  14. dom: 把标记文档以及文档中左右内容解析成对象树,并且提供一些对树中对象进行操作的 (变量和函数),以便于对象进行操作

  15. js: 提供程序设计语言,对页面中的对象进行逻辑操作 (if,for,...)

  16. </pre>

  17.  
  18. <pre>

  19. bom模型: browse object model 浏览器对象模型

  20. dom模型针对的是页面内容,bom模型针对的是浏览器

  21.  
  22. dom: document对象代表的是整个文档页面

  23. bom: window对象就是代表整个浏览器本身

  24. </pre>

 
  1. <head>

  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  3. <title>DHTML</title>

  4. <style type="text/css">

  5. .a{

  6. background-color: #00ff80;

  7. width:150px;

  8. font-size: 18pt;

  9. }

  10. table{

  11. border: 1px solid red;

  12. width:400px;

  13. border-collapse: collapse;

  14. }

  15. td{

  16. border:1px solid red;

  17. }

  18.  
  19. </style>

  20.  
  21. <script type="text/javascript">

  22. function fun(){

  23. var oDiv = document.getElementById("div1");

  24. oDiv.innerText = "湖南长沙";

  25. // ODiv.innerHTML = "<font size = 5>湖南长沙</font>" ;

  26. oDiv.className = "a";

  27. }

  28.  
  29. function del (objA){

  30. var oTd = objA.parentNode;

  31. var oTr = oTd.parentNode;

  32. oTr.removeNode(true);

  33. }

  34.  
  35. </script>

  36.  
  37.  

猜你喜欢

转载自blog.csdn.net/weixin_42400955/article/details/81265139