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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
JS定义函数的几种常用方法小结
May 23 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
用Python解决计数原理问题的方法
2016/08/04 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
大学生职业规划前言模板
2013/12/27 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
九寨沟导游词
2015/02/02 职场文书
婚宴父亲致辞
2015/07/27 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python