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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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
杏林同学录(五)
2006/10/09 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
收集的几个Python小技巧分享
2014/11/22 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
你常见到的runtime exception
2016/09/05 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
工地安全质量标语
2014/06/07 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
Python jiaba库的使用详解
2021/11/23 Python
基于Python实现nc批量转tif格式
2022/08/14 Python