javascript入门笔记3-dom

1.通过ID获取元素

document.getElementById(“id”)

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>document.getElementById</title>

</head>

<body>

<p id="con">JavaScript</p>

<script type="text/javascript">

  var mychar=   document.getElementById("con")        ;

  document.write("结果:"+mychar); //输出获取的P标签。

</script>

</body>

</html>

2.

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

语法：Object.innerHTML

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

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

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>innerHTML</title>

</head>

<body>

<h2 id="con">javascript</H2>

<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>

<script type="text/javascript">

  var mychar=   document.getElementById("con")        ;

  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容

  mychar.innerHTML="ddd";

  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

</script>

</body>

</html>

3.改变 HTML 样式

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

语法:

Object.style.property=new style;

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

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>style样式</title>

</head>

<body>

  <h2 id="con">I love JavaScript</H2>

  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>

  <script type="text/javascript">

    var mychar= document.getElementById("con");

    mychar.style.color="red";

    mychar.style.backgroundColor="#CCC";

    mychar.style.width="300";

  </script>

</body>

</html>

4.显示和隐藏（display属性）

语法：

Object.style.display = value

value值：

none:隐藏

block:显示

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>display</title>

    <script type="text/javascript">

        function hidetext()

        {

        var mychar = document.getElementById("con");

        mychar.style.display="none";

        }

        function showtext()

        {

        var mychar = document.getElementById("con");

        mychar.style.display="block";

        }

    </script>

</head>

<body>

    <h1>JavaScript</h1>

    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>

    <form>

       <input type="button" onclick="hidetext()" value="隐藏内容" />

       <input type="button" onclick="showtext()" value="显示内容" />

    </form>

</body>

</html>

5.控制类名（className 属性）

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

例子：



<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>className属性</title>

<style>

    body{ font-size:16px;}

    .one{

        border:1px solid #eee;

        width:230px;

        height:50px;

        background:#ccc;

        color:red;

    }

    .two{

        border:1px solid #ccc;

        width:230px;

        height:50px;

        background:#9CF;

        color:blue;

    }

    </style>

</head>

<body>

    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <input type="button" value="添加样式" onclick="add()"/>

    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">

       function add(){

          var p1 = document.getElementById("p1");

          p1.className="one";

       }

       function modify(){

          var p2 = document.getElementById("p2");

          p2.className="two";

       }

    </script>

</body>

</html>

6.任务

一、定义”改变颜色”的函数

提示:

obj.style.color

obj.style.backgroundColor

二、定义”改变宽高”的函数

提示:

obj.style.width

obj.style.height

三、定义”隐藏内容”的函数

提示:

obj.style.display=”none”;

四、定义”显示内容”的函数

提示:

obj.style.display=”block”;

五、定义”取消设置”的函数

提示:

使用confirm()确定框，来确认是否取消设置。

如是将以上所有的设置恢复原始值,否则不做操作。

六、当点击相应按钮，执行相应操作，为按钮添加相应事件

答案：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />

<title>javascript</title>

<style type="text/css">

body{font-size:12px;}

#txt{

    height:400px;

    width:600px;

    border:#333 solid 1px;

    padding:5px;}

p{

    line-height:18px;

    text-indent:2em;}

</style>

</head>

<body>

  <h2 id="con">JavaScript课程</H2>

  <div id="txt">

     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>

        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>

        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>

        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>

  </div>

  <form>

  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->

    <input type="button" value="改变颜色" onclick="clo()">

    <input type="button" value="改变宽高" onclick="wid()">

    <input type="button" value="隐藏内容" onclick="hid()">

    <input type="button" value="显示内容" onclick="blo()">

    <input type="button" value="取消设置" onclick="res()">

  </form>

  <script type="text/javascript">

//定义"改变颜色"的函数

    function clo(){

        var p = document.getElementById("txt");

        p.style.color="red";

    }

//定义"改变宽高"的函数

    function wid(){

        var p = document.getElementById("txt");

        p.style.width="300px";

        p.style.height="300px";

    }

//定义"隐藏内容"的函数

    function hid(){

        var p = document.getElementById("txt");

        p.style.display = "none";

    }

//定义"显示内容"的函数

    function blo(){

        var p = document.getElementById("txt");

        p.style.display = "block";

    }

//定义"取消设置"的函数

    function res(){

        var p1 = confirm("是否取消");

        var p = document.getElementById("txt");

        if(p1==true){

            p.removeAttribute('style');

        }

    }

  </script>

</body>

</html>

javascript入门笔记3-dom的更多相关文章

JavaScript基础——JavaScript入门(笔记)
JavaScript入门(笔记) JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代 ...
JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符第二章 JavaScript流程控制语句 2.1 循 ...
JavaScript 入门笔记
JavaScript 1.JS和DOM的关系浏览器有渲染html代码的功能,把html源码在内存里形成一个DOM对象,就是文档对象浏览器内部有一个JS的解释器/执行/引擎,如chrome用v8 ...
javascript入门笔记9-认识DOM
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...
javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
JavaScript 学习笔记-HTML&&DOM
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...
JavaScript入门笔记（一）
JavaScipt 2.1 javascript的组成部分 ECMAScript: 它是整个 javascript 的核心,包含(基本语法.变量.关键字.保留字.数据类型.语句.函数等等)DOM:文档 ...
JavaScript学习笔记之DOM介绍
目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介文档对象模型(Document Object Model,DOM) ...
javascript学习笔记之DOM
DOM(文档对象模型),描述了一个层次化的节点树一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

随机推荐

5W1H
WHY ——为什么做?原因与目标 WHAT ——做什么?目标与内容 WHO ——谁去做?具体的执行者 WHEN ——什么时间做?执行时间 WHERE——在什么地方做?执行地点 HOW——怎样做 ...
用LaTeX画树形结构
用LaTeX画树形结构,比如:文件目录树形图,程序中函数调用关系图等. 找到的一个不错的资源: http://www.texample.net/tikz/examples/feature/trees/ ...
RTT之内核服务函数
一延时函数: rt_thread_delay(t) //调用时进入系统调度. rt_kprintf()函数在kservice.c中实现,如果不使用设备驱动,则由自定义函数void rt_hw_con ...
(转)Shell脚本编程－－Uniq命令
uniq 原文:http://blog.csdn.net/xifeijian/article/details/9209627 uniq命令可以去除排序过的文件中的重复行,因此uniq经常和sort合用 ...
a :hover 和a:hover 区别
article a :hover { color: red;} 上面表示 article 内所有a 标签的所有子标签在hover时是红色 article a:hover { color: red; ...
JS在与lua的交互心得
最近在写一个项目,前端技术使用的是Vue,在与lua的交互过程,是通过一个公共JS,前端调用公共js的方法给lua发送命令,lua接到命令,去执行一些方法,然后又通过回调返回到了前端,由于是第一次写这 ...
<Android 基础（十七）> ViewPager介绍
介绍 Layout manager that allows the user to flip left and right through pages of data. You supply an i ...
Android基础Activity篇——Menu
1.创建一个menu 在res目录右击-->new-->Drirectory,创建menu,然后右击menu-->new-->Menu resource file 创建main ...
使用C#实现计划任务（corn job）
维基百科上是这样描述计划任务的: “Cron is a time-based job scheduler in Unix-like computer operating systems. Cron i ...
RabbitMQ基本用法、消息分发模式、消息持久化、广播模式
RabbitMQ基本用法进程queue用于同一父进程创建的子进程间的通信而RabbitMQ可以在不同父进程间通信(例如在word和QQ间通信) 示例代码生产端(发送) import pika c ...

javascript入门笔记3-dom

javascript入门笔记3-dom的更多相关文章

随机推荐

热门专题