HTML DOM - 修改

最新推荐文章于 2024-07-17 18:42:40 发布

Frankie_Yaozz

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量343

点赞数

分类专栏： HTML 文章标签： html dom

本文链接：https://blog.csdn.net/Frankie_Yaozz/article/details/53884244

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

1.改变HTML内容

<html>
<body>

<p></p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

2.改变CSS样式

<html>
<body>

<p id ="p2">Hello HTML!</p>

<script>
document.getElementById(p2").style.color ="blue"
</script>

</body>
</html>







3.创建新的HTML元素
<div id ="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para =document.createElement("p");
var node =document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("d1");
element.appendChild(para);
//element.inserbefore(para,child);
//parent.removeChild(child);
//parent.replaceChile(para,child);
//child.parentNode.removeChild(child);
</script>





4.HTML事件：


 
 当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时




<!DOCTYPE html>
<html>
<body>
<h1 οnclick="this.innerHTML='hello'">请点击这段文本!</h1>
</body>
</html>




function changetext(id){
    id.innerHTML="hello";
    }

<body>
<h1 οnclick="changetext(this)">点击这段文本</h1>
</body>




<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>


5.onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

 
 
  
  


 
 

 
 
  
  <body οnlοad="checkCookies()">

  
  
   
   


  
  
6.
  
  onchange 事件

  
  
onchange 事件常用于输入字段的验证。

  
  
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函

  
  

  
  <input type="text" id="fname" οnchange="upperCase()">