您的位置：首页 > 其它

每日随笔小记-4月20日

2016-04-20 10:49 218 查看

JS HTML DOM 使用

HTML DOM （文档对象模型）介绍

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。


平时我们都是直接编写html元素，如果我们想要操作已经生成的html页面，通过可编程的对象模型，操作DOM，实现对页面的修改也编辑。

JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

JavaScript获取到元素

<!DOCTYPE html>
<html>
<body>
<p id="info">Hello World!</p>
<p>获取元素</p>
<script>
var x=document.getElementById("info"); //通过id获取到html元素
var y=document.getElementsByTagName("p");//通过标签名获取到
</script>
</body>
</html>


JavaScript操作获取的元素

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">
<p id="p1">Hello World!</p>
<script>
document.getElementById("image").src="landscape.jpg";//修改img标签的src属性
document.getElementById("p1").innerHTML="New text!";//修改p标签的内容
document.getElementById("p1").style.color="blue";//修改了p变签样式中的颜色，设置为蓝色
</script>

</body>
</html>


在js中操作html元素首先要通过id在dom获取相应的元素，然后通过其属性重新设置属性值。

document.getElementById(“id值”).属性（例如src）=”新的属性值”;

document.getElementById(“id值”).style.属性（例如color）=”属性值”;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航