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判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
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生成二维码的两个方法和实例
2014/07/01 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php图片裁剪函数
2018/10/31 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python方向键控制上下左右代码
2018/01/20 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
pymysql模块的操作实例
2019/12/17 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
家长会邀请书
2014/01/25 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2014年关工委工作总结
2014/11/17 职场文书
初三数学教学反思
2016/02/17 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript