关于DOM中的model(将元素转成对象进行操作)
DOM
document (html, xml)
object 将文档中的HTML元素转成js的对象
通过ID找到文档的元素转成js对象
var obj = document.getElementById("test");
1. 通用的方式
document.getElementById(id); //通过元素中的唯一的ID
document.getElementsByName(name); //通过元素中的name属性
document.getElementsByTagName(tagname); //通过元素中的标签名称
id的方式, 一个文档中ID是不能重复的, 在一个文档中通过ID只能获取一个对象
而通过文档中元素的name属性和tagname标记名称获取到的元素对象是多个,也就是复数
2. 使用document中的内置数组来完成
model 对元素转成的对象进行操作
1. 内容(使用通用的4个属性) a div b h1 ... <input> 用 value <tag>内容</tag>使用下面4个
innerHTML
innerText 只有IE好用, 非IE不好用(textContent), 不兼容
表单中的内容如何改
<input type="text" name="hello" value="abc">
<areatext></areatext>
属性可以改值, 也可以取值
所有的表单改内容和获取内容都要使用value属性
2. 操作属性
将元素转成对象后, 原来元素有的属性, 就是这个对象的属性
属性可以改值, 也可以取值
3. 操作样式
可以获取样式, 也可以改样式
一、 可以一个一个样式的改
对象.style.样式属性=“样式的值”
样式属性如果有"-"的, 将这个去了, 后面的单词首字母大写
二、 可以批量的改样式
使用className这个通用属性(所有元素都可以使用的属性)
清除样式将className设置为空
关于DOM中的model(将元素转成对象进行操作)的更多相关文章
- 如何获取DOM中当前获取焦点的元素
<script type="text/javascript"> function msg(e) // e = event { var target; //initial ...
- 获取表单内元素组装成对象类型,方便datagrid的load取参数
/** * 获取表单数据,并将其转换为对象 */ function getFormObj(formId) { var formObj = {}; var inputs = $('#'+formId). ...
- 095、Java中String类之不自动保存对象池操作
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Java&Selenium自动化测试实现页面元素、页面对象及测试代码分离
一.摘要 本篇博文将介绍自动化测试实现页面元素.页面对象及测试代码分离在自动化框架中的实现 二.解析页面元素定位信息 首先,将页面元素与实际的代码分离,首先我们将页面元素定位信息和定位表达式保存在属性 ...
- javascript判断元素存在和判断元素存在于实时的dom中的方法
今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...
- DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
- DOM中元素对象的属性方法
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个 文档节点 . 所有的HTML元素都是 ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js基础之DOM中元素对象的属性方法
在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个 文档节点 . 所有的HTML元素都是 ...
随机推荐
- 适配器模式(Adpater Pattern)
适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 适配器模式的用途 用电器做例子,笔记本电脑的插头一般都是三相的,即除了阳极.阴极 ...
- Ultimus BPM 金融与证券行业应用解决方案
Ultimus BPM 金融与证券行业应用解决方案 行业应用需求 金融服务业的整合与全球化发展,带来高度竞争的国际市场,所牵涉的产业包括了商业.贷款.投资银行,以及保险公司和许多其它为企业和消费者提供 ...
- Linux系统下安装Mysql5.7.18教程收集分享
本人最近服务器新手入门,需要搭建一个在linux虚拟机上的服务器 第一天再装虚拟机,选的linux系统CentOS,一切顺利. 第二天,要给虚拟机装Mysql,但是需要用到命令行进行安装/操作等,我是 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- MySQL目录结构和简单指令
1.MySQL目录结构 了解每个软件的安装目录下,每个文件夹下文件的类型和功能是有必要的,这可以方便我们直接进行软件配置和某些参数的修改. 2.简单指令 进入cmd后可以直接操作的命令 1)启动MyS ...
- C#实现谷歌翻译API
由于谷歌翻译官方API是付费版本,本着免费和开源的精神,分享一下用C#实现谷歌翻译API的代码.这个代码非常简单,主要分两块:通过WebRequest的方式请求内容:获取Get方式的请求参数(难点在于 ...
- 排序与检索【UVa10474】Where is the Marble?
Where is the Marble? DescriptionRaju and Meena love to play with Marbles. They have got a lot of ma ...
- iOS 手势
一.看这里 二.抽象类 UIGestureRecognizer 继承于该类的有7类:轻点,捏合,拖拽,滑动,长按,旋转,边缘滑动; 一个手势可以绑定多个事件 - (void)addTarget:( ...
- java基础(三章)
java基础(三章) 一.基本if结构 1.流程图 l 输入输出 l 判断和分支 l 流程线 1.1 简单的if条件判断 if(表达式){ //表 ...
- 织梦DedeCMS调用二级子栏目或者多级栏目的方法
图2 当前栏目typeid值为3,所以代码如下: {dede:channelartlist typeid='3,3'} <a href="{dede:field name='typeu ...