首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript基础2---控制权DOM操作

JavaScript基础2---控制权DOM操作

作者头像
用户1624346
发布2018-04-10 16:39:29
7260
发布2018-04-10 16:39:29
举报
文章被收录于专栏:calmoundcalmound

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。 DOM将HTML文档呈现为带有元素,属性和文本的树结构(节点树)。

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

1.元素节点:上图中<html>,<body>,<p>等都是元素节点,即标签。 2.文本节点:向用户展示的内容,如<li>...</li>中的JavaScript,DOM,CSS等文本 3.属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

<a href="http://www.imooc.com">JavaScript DOM</a>

通过ID获取元素   网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要 通过身份证号就可以找到对应的人。那么我们可以通过id先找到标签,再进行操作。

语法: document.getElementById(“id”) 

例子:

结果:null或[object HTMLParagraphElement]

注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

innerHTML属性    innerHTML属性用于获取或替换HTML元素的内容 语法:Object.innerHTML 注意:1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素          2.注意书写,innerHTML区分大小写 例子:

改变HTML样式 语法:Object.style.property = new style; 注意:Object是获取的元素对象,如通过document.getElementById("ID"); 基本属性表:

例子:

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

显示和隐藏: 语法:Object.style.display = value; value值

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2014-11-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档