JS之DOM基础学习

原创 2015年11月18日 10:48:03
1、

认识DOM

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

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

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>

2、

通过ID获取元素

学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:

 document.getElementById(“id”) 

3、

innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

注意:

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写。

我们通过id="con"获取<p> 元素,并将元素的内容输出和改变元素内容,代码如下:

4、

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:

Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):

注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变 <p> 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:

<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>

5、

显示和隐藏(display属性)

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:

Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:


JavaScript学习篇之——DOM学习

DOM是什么 DOM称为文档对象模型,是HTML文档和XML文档等文档的应用程序接口,。它提供了一种结构化的文档表示方式,从而使你可以修改它的内容以及最终的表达方式,进而将网页和脚本货编程语言连接...
  • zwk626542417
  • zwk626542417
  • 2013年11月26日 18:48
  • 2460

js之DOM深入学习总结

DOM编程深入学习
  • liujie19901217
  • liujie19901217
  • 2016年07月05日 21:45
  • 2325

没有JavaScript的基础,我可以学习Angular2吗?

Can I learn and understand Angular2 without understanding JavaScript?没有JavaScript基础我能学习和理解Angular2吗?...
  • sushengmiyan
  • sushengmiyan
  • 2016年09月19日 09:18
  • 1500

JS基础知识之:DOM学习

DOM学习   http://www.w3school.com.cn/htmldom/dom_nodes.asp http://www.w3cschool.cc/jsref/dom-obj-attri...
  • kingmicrosoft
  • kingmicrosoft
  • 2015年04月04日 10:28
  • 327

js基础学习第一天(关于DOM和BOM)一

关于BOM和DOM BOM 下面一幅图很好的说明了BOM和DOM的关系         BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开...
  • x6587305x
  • x6587305x
  • 2011年12月06日 14:44
  • 6185

js基础学习第二天(关于DOM和BOM)二

DOM的节点 节点主要有以下几个属性和 nodeName String 节点的名字;根据节点的类型而定义,元素节点返回tagName,文本节点返回#text,属性节点返回属性名...
  • x6587305x
  • x6587305x
  • 2011年12月09日 13:04
  • 429

JS学习1--基础、DOM控制Html元素、JS事件

初印象:HTML的控制部分 一、JS基础 代码位置js的实现方式有三种(head,body,外部),通常的做法是把函数放入 部分中,或者放在页面底部变量 a.变量声明 var...
  • zinjin_woxin
  • zinjin_woxin
  • 2015年07月11日 12:02
  • 398

js基础&&dom编程 25

5 Javascript入门      5.1 引入 html:负责网页结构 css: 负责网页美观 javascript:负责用户与浏览器交互。 5.2 javacript的来由 199...
  • wyx542813672
  • wyx542813672
  • 2017年06月29日 14:32
  • 63

JS基础_DOM属性和操作

DOM操作1. 事件1.1 概述JS是以事件驱动为核心的一门语言1.2 事件三要素 事件源、事件、事件驱动程序a、获取事件源 获取事件源一共5种 document.getElementById...
  • ziwutong88
  • ziwutong88
  • 2016年11月29日 01:47
  • 653

js笔记-DOM基础

DoM 浏览器支持: IE: 10% FF: 99% Chrome: 60% childNotes不兼容 在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中ch...
  • he_qiao_2010
  • he_qiao_2010
  • 2013年09月17日 15:20
  • 886
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS之DOM基础学习
举报原因:
原因补充:

(最多只允许输入30个字)