最新消息:文章中包含代码时,请遵守代码高亮规范!

javascript-DOM

原创文章 user 799浏览 0评论

一.html DOM 简介

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)

image.png

二.DOM操作HTML

1. javascript 改变页面中所有的html元素

document.write('ok'); // 改变文档的输出流
// 通过id找到html元素并修改内容
var id = document.getElementById('id'); 
id.innerHTML = 'ok2';
// 通过标签修改(如果是多个,寻找第一个标签名)
document.getElementsByTagName('div');

2. javascript 改变页面中所有html属性

var a_id = document.getElementById('a_id'); 
a_id.href = 'https://www.yayuanzi.com/'; // 更改a标签的链接

var img_id = document.getElementById('img_id'); 
img_id.src = '1.png';  // 更改img标签的图片地址来源

3. javascript 改变页面中所有css样式

document.getElementById(id).style.property = new style; // 代码格式

document.getElementById('div').style.color = 'red'; // id为div的文字颜色改为红色

4. javascript 对页面中所有事件作出反应

<button type="button" οnclick="alert('欢迎!')">点我啊!</button>

转载时请注明出处及相应链接,本文永久地址:/25433.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Miya的打赏,我们会更加努力!    如果您想成为作者,请点我

发表我的评论
取消评论

表情