DOM操作一些常用的属性汇总


Posted in Javascript onMarch 13, 2015

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

2.DOM的一些常用的属性

2.1 通过ID获取元素

(1)语法:

document.getElementById("id");

(2)作用:id就向一个人的身份证,我们可以通过寻找标签的id来寻找标签,然后进行相应的操作。

(3)注意:不要忘记写document!

2.2 innerHTML属性

(1)语法:

Obgect.innerHTML="Hello World"

(2)作用:主要是对标签内的内容进行获取或替换

(3)例子:

<!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="Hello World!";

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

</script>

</body>

</html>

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

2.3 改变HTML样式

(1)语法:

Object.style.property

(2)作用:用于修改HTML样式

(3)例子:

<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="300px";

  </script>

</body>

(4)注意:property有很多的样式,比如color,height等等都可以用这个方法去修改,在一个就是不要忘记属性后面都要加分号”“。

2.4 显示和隐藏(display属性)

(1)语法:

Object.style.display=value

(2)作用:网页中常看到显示和隐藏,就是用display属性来实现的

(3)例子:

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

(4)注意:value的值为none和block,其中none为不显示内容,而block为显示内容

2.5 className属性

(1)语法:

Object.className=classname

(2)作用:1.获取元素的class属性;2.为网页中的某一个元素指定一个css样式来改变改元素的外观

(3)例子:

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

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
遍历jquery对象的代码分享
Nov 02 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
jQuery插件制作的实例教程
May 16 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
JavaScript获取页面上被选中文字的方法技巧
Mar 13 #Javascript
jQuery源码分析之Callbacks详解
Mar 13 #Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 #Javascript
Javascript定义类(class)的三种方法详解
Mar 13 #Javascript
JavaScript中5种调用函数的方法
Mar 12 #Javascript
JavaScript实现的一个倒计时的类
Mar 12 #Javascript
JavaScript将XML转成JSON的方法
Mar 12 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
Vue.use源码分析
2017/04/22 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
wxpython布局的实现方法
2019/11/01 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang