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(将元素转成对象进行操作)的更多相关文章

  1. 如何获取DOM中当前获取焦点的元素

    <script type="text/javascript"> function msg(e) // e = event { var target; //initial ...

  2. 获取表单内元素组装成对象类型,方便datagrid的load取参数

    /** * 获取表单数据,并将其转换为对象 */ function getFormObj(formId) { var formObj = {}; var inputs = $('#'+formId). ...

  3. 095、Java中String类之不自动保存对象池操作

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  4. Java&Selenium自动化测试实现页面元素、页面对象及测试代码分离

    一.摘要 本篇博文将介绍自动化测试实现页面元素.页面对象及测试代码分离在自动化框架中的实现 二.解析页面元素定位信息 首先,将页面元素与实际的代码分离,首先我们将页面元素定位信息和定位表达式保存在属性 ...

  5. javascript判断元素存在和判断元素存在于实时的dom中的方法

    今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...

  6. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  7. DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  8. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js基础之DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

随机推荐

  1. 模板方法模式(Tempalte Method Pattern)

    模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有 ...

  2. Natas Wargame Level 16 Writeup(Content-based Blind SQL Injection)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqwAAADhCAYAAAANm+erAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  3. DB太大?一键帮你收缩所有DB文件大小(Shrink Files for All Databases in SQL Server)

    本文介绍一个简单的SQL脚本,实现收缩整个Microsoft SQL Server实例所有非系统DB文件大小的功能. 作为一个与SQL天天打交道的程序猿,经常会遇到DB文件太大,把空间占满的情况: 而 ...

  4. Dockerfile 最佳实践

    之前 一篇文章介绍 docker 的镜像基本原理和概念 ,主要介绍在编写 docker 镜像的时候一些需要注意的事项和推荐的做法. 虽然 Dockerfile 简化了镜像构建的过程,并且把这个过程可以 ...

  5. mybaties 缓存

    http://www.cnblogs.com/zemliu/archive/2013/08/05/3239014.html http://www.cnblogs.com/xdp-gacl/p/4270 ...

  6. Unity应用架构设计(10)————绕不开的协程和多线程(Part 1)

    在进入本章主题之前,我们必须要了解客户端应用程序都是单线程模型,即只有一个主线程(Main Thread),或者叫做UI线程,即所有的UI控件的创建和操作都是在主线程上完成的.而服务器端应用程序,也就 ...

  7. 重构了cxlt-vue2-toastr插件

    距离上篇文章已经过去一个多月了,期间有很多想法,但时间真不是想挤就能挤出来的.其实这段时间我就做了一件事,一个小程序的项目,已上线半月有余,也迭代了几个版本,现在还在不断完善. 先说点题外话,我们做了 ...

  8. IT培训行业揭秘(六)

    2017年全国的IT职业培训机构的招生数量相比于去年同期都出现了大规模的下滑,虽然目前大学生毕业之后参加培训班的人数依然没有变化,但是目前中小培训机构像雨后春笋般的纷纷建立,他们纷纷抢占市场,为了招生 ...

  9. 如何优雅地实现Python通用多线程/进程并行模块

    当单线程性能不足时,我们通常会使用多线程/多进程去加速运行.而这些代码往往多得令人绝望,需要考虑: 如何创建线程执行的函数? 如何收集结果?若希望结果从子线程返回主线程,则还要使用队列 如何取消执行? ...

  10. CSS小技巧-两个盒子之间的间距问题

    1.水平排放的盒子,水平间距是两个margin的累加 2.垂直排放的盒子,垂直间距是合并的取最大值