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取值:

看看下面代码:


相关文章推荐

JS基础知识之:DOM学习

DOM学习   http://www.w3school.com.cn/htmldom/dom_nodes.asp http://www.w3cschool.cc/jsref/dom-obj-attri...

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

DOM的节点 节点主要有以下几个属性和 nodeName String 节点的名字;根据节点的类型而定义,元素节点返回tagName,文本节点返回#text,属性节点返回属性名...

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

关于BOM和DOM BOM 下面一幅图很好的说明了BOM和DOM的关系         BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开...

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

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

js笔记-DOM基础

DoM 浏览器支持: IE: 10% FF: 99% Chrome: 60% childNotes不兼容 在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中ch...

JS基础_DOM属性和操作

DOM操作1. 事件1.1 概述JS是以事件驱动为核心的一门语言1.2 事件三要素 事件源、事件、事件驱动程序a、获取事件源 获取事件源一共5种 document.getElementById...

慕课笔记:JS基础之——DOM对象,控制HTML元素

获取一个节点对象的方法 获取属性和设置属性的值的方法 节点属性 节点访问 插入、删除、替换和新建节点 获取网页内部各种距离...
  • actttt
  • actttt
  • 2017年07月18日 10:16
  • 26

JS DOM 基础

1.DOM 的4个基本接口   Document  Node  NodeList  NamedNodeMap 2.DOM 基本对象   (1)Document 对象   (2)Node 对象     ...

WEB前端 | JS基础——(8)DOM

BOM // BOM对象就是可以对浏览器进行操作的对象 // JS里面所有的全局变量都是window对象的属性 a = 40; console...
  • Erosvan
  • Erosvan
  • 2016年10月29日 10:31
  • 155

js入门——Dom基础

DOM=DocumentObject Model,文档对象模型。 Dom有三个不同的部分。     1、核心DOM 也是最基础的文档结构的标准模型     2、XMLDOM 针对XML文档的标准...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS之DOM基础学习
举报原因:
原因补充:

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