JavaScriptDOM(二)

HTML DOM修改

修改 HTML DOM 意味着许多不同的方面:
改变 HTML 内容;
改变 HTML 样式;
改变 HTML 属性;
创建新的 HTML 元素;
删除已有的 HTML 元素;
改变事件(处理程序);

1.改变 HTML 内容

改变元素内容的最简单的方法是使用 innerHTML 属性;

<h1 id="change">Hello World!</h1>
<script>
	document.getElementById("change").innerHTML="改变";
</script>
2.改变 HTML 样式
<h1 id="change">Hello World!</h1>
<script>
	document.getElementById("change")..style.color="red";
	document.getElementById("change")..style.fontSize="12px";
</script>
3.创建新的 HTML 元素

在页面中创建了一个新的p标签:
创建了一个新的p标签;需向p标签添加文本,您首先必须创建文本内容;然后您必须向 p标签追加文本内容;最后,您必须向已有元素追加这个新元素。

<div id="div1">
</div>
<script>
	var p = document.createElement("p");
	var text = document.createTextNode("这是一个新段落。");
	p.appendChild(text);
	var div = document.getElementById("div1");
	div.appendChild(p);
</script>
4.删除已有的 HTML 元素
<div id="div1">
   	 <p id="p1">这是一个段落。</p>
  	 <p id="p2">这是另一个段落。</p>
</div>
<script>
	var parent=document.getElementById("div1");
	var child=document.getElementById("p1");
	parent.removeChild(child);
</script>
5.处理事件

点击按钮时改变 p标签的文本:

<p id="p1">Hello world!</p>
<button  onclick="ChangeText()">修改</button>
<script>
function ChangeText(){
 	document.getElementById("p1").innerHTML="你好,世界!";
}  
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值