DOM操作一些常用的属性汇总
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>
以上就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
Python random模块常用方法
复制代码 代码如下: import random print random.random() 获取一个小于1的浮点数 复制代码 代码如下: import random random.randint(1,10) 获取一个从1到10的整数 复制代码 代码如下: import random print random.uniform(0,2) 获取一个大于0小于2的浮点数 复制代码 代码如下: import random print random.randrange(1,10,4) 获取一个从1到10步
-
常用DOM整理
前言: html为document搭建了一棵DOM树,这棵树就是有一系列Node节点所构成的.他为我们定义了文档的结构. Node类型: Node.ELEMENT_NODE(1); //元素节点较常用 Node.ATTRIBUTE_NODE(2); //属性节点较常用 Node.TEXT_NODE(3); //文本节点较常用 Node.CDATA_SECTION_NODE(4); Node.ENTITY_REFERENCE_NODE(5); Node.ENTIT
-
jquery对dom的操作常用方法整理
Jquery对dom的操作也是很总要的. 1.三个简单实用的用于 DOM 操作的 jQuery 方法: · text() - 设置或返回所选元素的文本内容 · html() - 设置或返回所选元素的内容(包括 HTML 标记) · val() - 设置或返回表单字段的值 2.attr()获取属性.当然这两也是可以自己设置值来修改的, 3.对html内容的添加.添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: · append() - 在被选元素的结尾插入内容 · p
-
Python random模块（获取随机数）常用方法和使用例子
random.randomrandom.random()用于生成一个0到1的随机符点数: 0 <= n < 1.0 random.uniformrandom.uniform(a, b),用于生成一个指定范围内的随机符点数,两个参数其中一个是上限,一个是下限.如果a > b,则生成的随机数n: a <= n <= b.如果 a <b, 则 b <= n <= a 复制代码 代码如下: print random.uniform(10, 20)print rand
-
DOM操作一些常用的属性汇总
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 inne
-
jQuery原理系列-常用Dom操作详解
1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve
-
JavaScript中DOM操作常用事件总结
目录 常用事件 演示得到焦点和失去焦点 演示 鼠标划过和离开 点击事件 load加载页面事件 onkeyup 键盘弹起事件 内容变化事件 选中时触发 上一篇聊了如何同JavaScript获得页面元素,而获得页面元素的的目的就是操作这个元素的一行为,而这个行为是通过某个条件进行触发的.而这个一系列在JavaScript中称之为事件. 由此可以看出事件分三个部分: 事件源头: 也就是要操作的元素是谁. 事件类型: 也就是事件触发条件,比如鼠标点击以及鼠标滑过等. 事件处理: 如果触发了这个行为,如何
-
原生JS实现几个常用DOM操作API实例
原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o
-
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
本文实例讲述了JavaScript基于Dom操作实现查找.修改HTML元素的内容及属性的方法.分享给大家供大家参考,具体如下: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C
-
jQuery中DOM操作原则实例分析
本文实例讲述了jQuery中DOM操作原则.分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的.也就是说,某个方法既可用于读取操作,也可用于设置操作.如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据:如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值. 示例代码 // 没有传入value参数,返回第一个匹配元素的value元素 va
-
AngularJS中的DOM操作用法分析
本文实例讲述了AngularJS中的DOM操作用法.分享给大家供大家参考,具体如下: 在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中. 避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素.你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives. 如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧.真的,AngularJS 中
-
AngularJS 最常用的功能汇总
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发.如同其他的抽象技术一样,这也会损失一部分灵活性.换句话说,并不是所有的应用都适合用AngularJS来做.AngularJS主要考虑的是构建CRUD应用.幸运的是,至少90%的WEB应用都是CRUD应用.但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建. 如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建.像这种情
-
js基础之DOM中元素对象的属性方法详解
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个 文档节点 . 所有的HTML元素都是 元素节点 所有 HTML 属性都是 属性节点 文本插入到 HTML 元素是 文本节点 注释是 注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',
-
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位置上的节点被移除了.有的时候需要保留原来位置上的节点,仅仅是需要一个副本添加到对应位置,这个时候克隆就有了使用场景. jQuery.fn.clone克隆当前匹配元素集合的一个副本,并以jQuery对象的形式返回. 你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( data()函数 )