Windows对象主要是操作浏览器外层的东西,而DOM对象是操作浏览器里面的东西。

如果我们要操作网页内容,那么一定需要操作标签!

Document:文档对象模型→DOM:可以做一些特效(抢票的)。摘出网页的某一元素(标签),找到他们然后增删改。

一、找元素

1、根据ID找元素

document的获取方式:

根据id进行获取元素的方式如下:

	var idq = document.getElementById("idq");
alert(idq);

  


2、根据class获取元素

	var o_class1 = document.getElementsByClassName("divclass");//(数组)
alert(o_class1);

  


3、根据标签获取元素

4、根据name找元素

    var ss = document.getElementsByName("ys")
alert(ss[]);

name是多个也是复数。


二、操作元素

1、操作内容

①非表单元素

(1)获取文本:innerText

(2)设置文本

(3)获取html代码

如果想要获取div中,包括span中的所有的代码:

(4)设置Html代码

设置HTML代码,是可以增加动态效果的,输出时页面显示效果。反之,如果使用innerText,就会将效果(<b>加粗</b>)同时也显示出来了。

②表单元素

(1)赋值(设置一个值)

    var b1 = document.getElementById("b1");
// alert(value = "请输入内容"); //提示框输出
b1.value = "请输入内容"; //网页输出

(2)获取值(取值)

alert(b.value);

2、操作属性

①添加属性(设置)

//添加属性
var d1 = document.getElementById("idq");
d1.setAttribute("style","color: red");

②获取属性

getAttribute

<div id="idq" iid="我在这里"><span>获取文本</span></div>
<script type="text/javascript">
  var d1 = document.getElementById("idq");
alert(d1.getAttribute("iid"));
</script>

③移除属性

removeAttribute

    var d1 = document.getElementById("idq");
d1.removeAttribute("iid");

3、操作样式

①获取样式(只能获取内联样式)

JS在获取样式时,只能获取内联的!其他像内嵌和外部的需要使用jquery才可以。

    function showa(){
//1、获取样式
var d2 = document.getElementById("d2");
alert(d2.style.color)
}

②设置样式

    function ang(){
var d2 = document.getElementById("d2");
//设置样式
d2.style.backgroundColor = "red"
}

Document对象操作、样式、属性、效果、的更多相关文章

  1. 使用document对象操作cookie

    1. 使用document对象的cookie属性,可以让你读取.添加和更新文档(当期HTML)所关联的cookie. 2. 当你读取document.cookie时,会得到当期文档的所有cookie. ...

  2. document对象操作:浏览器页面文件

    //找元素 1.根据id找 <div id="d1" cs="ceshi"><span>document对象</span>& ...

  3. JS中基本window.document对象操作以及常用事件!

    一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...

  4. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  5. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  6. JS DOM操作(二) Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  7. document对象-操作元素的文档结构

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  8. Document对象关于窗口的一些属性

    在网上搜罗的,只为自己查用方便,不做他用 window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间 ...

  9. Example013操作样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. centos7 安装lnmp环境

    准备工作 一.配置防火墙 vim /etc/sysconfig/iptables 开启80端口.3306.22端口 -A INPUT -m state --state NEW -m tcp -p tc ...

  2. PHPstorm同步文件时与ftp断开连接

    一用PHPstorm同步对比服务器端和本地文件的差异时,一会就断开ftp再也连不上了,弄了好久终于找到原因了,好像这个同步会频繁请求建立连接,服务器本地安全策略屏蔽了ip,还是下载后再做修改或者直接在 ...

  3. 如果mac电脑的usb转接器连接wlan时不显示,也就是不识别usb此时的网络连接没有,解决办法就是如下

    1.接上电源   关机 先按下shift +ctrl + opt + 开机键    ,等待10秒,这10秒是没有反应的,屏幕不会亮,系统不会跑起来,  10秒之后松开所有键,再按下opt + cmd ...

  4. Believe Me , I Can !

    Believe Me , I Can ! ---DF 第一阶段:(年底1-27之前) 1.  熟练使用JavaScript/CSS/HTML,熟悉HTML5 / CSS3: 2.  熟悉JavaScr ...

  5. 3MyBatis配置--深入浅出MyBatis技术原理与实践(笔记)

    XML 映射配置文件 configuration 配置 properties 属性 settings 设置 typeAliases 类型命名 typeHandlers 类型处理器 objectFact ...

  6. 【bzoj1708】[USACO2007 Oct]Money奶牛的硬币

    题目描述 在创立了她们自己的政权之后,奶牛们决定推广新的货币系统.在强烈的叛逆心理的驱使下,她们准备使用奇怪的面值.在传统的货币系统中,硬币的面值通常是1,5,10,20或25,50,以及100单位的 ...

  7. VB中PictureBox控件使用教程

    PictureBox对象可以说是任何对象的原始型态,它可以加载图片.显示文字.画图外,它还能与Frame对象一样,在自己本身里头加载其它的对象而自成一个小群组,用PictureBox可以仿真出任何对象 ...

  8. 利用Levenshtein Distance (编辑距离)实现文档相似度计算

    1.首先将word文档解压缩为zip /** * 修改后缀名 */ public static String reName(String path){ File file=new File(path) ...

  9. DEV MessageBox

    DialogResult dr = DevExpress.XtraEditors.XtraMessageBox.Show("确定要删除所有错误映射数据吗?", "提示&q ...

  10. 掌握 Linux PC 性能之基准测试

    导读 基准测试是一项测试或一系列测试,用来确定某个计算机硬件运行起来的状况有多好:在许多情况下,“基准测试”实际上等同于“压力测试”,通过测试硬件的极限,然后可以将测得的结果与其他硬件测得的结果作一番 ...