javascript html DOM

     DOM

        文档对象模型(Document Object Model,简称DOM)

    查找html元素

通过id查找

var x=document.getElementById("intro");


通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
先找到id为main的元素,再在main中找到标签为<p>的元素

通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

通过HTML DOM 让 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

通过Document.write()改变html输出流。
<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

          输出时间


改变html内容

通过document.getElementById("id").innerHTML="新文本";来改变html内容。
<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

改变html属性


通过document.getElementById("id").attribute="新属性";
<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

改变html样式

通过document.getElementById("id").style.stylename="newstyle";
document.getElementById("p2").style.color="blue";



通过触发事件来执行代码。

<h1 id="id1">我的标题 1</h1>
<button type="button" 
οnclick="document.getElementById('id1').style.color='red'">
点我!</button>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值