Document对象操作、样式、属性、效果、

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对象操作、样式、属性、效果、的更多相关文章
- 使用document对象操作cookie
1. 使用document对象的cookie属性,可以让你读取.添加和更新文档(当期HTML)所关联的cookie. 2. 当你读取document.cookie时,会得到当期文档的所有cookie. ...
- document对象操作:浏览器页面文件
//找元素 1.根据id找 <div id="d1" cs="ceshi"><span>document对象</span>& ...
- JS中基本window.document对象操作以及常用事件!
一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...
- DOM中document对象的常用属性方法
每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返 ...
- js基础之DOM中document对象的常用属性方法
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
- JS DOM操作(二) Window.docunment对象——操作样式
一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端 用 id 定位 -- ...
- document对象-操作元素的文档结构
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- Document对象关于窗口的一些属性
在网上搜罗的,只为自己查用方便,不做他用 window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间 ...
- Example013操作样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Beta版本冲刺第五天
Aruba 408 409 410 428 429 431 完成任务: 数据库对于分类新建/删除的更新 调整图片再编辑界面的合适大小 调整常驻通知栏按钮的跳转逻辑 微调数据库 立会照片: 燃尽图: c ...
- 【Android群英传】学习笔记(三·一)
本篇笔记中,笔者将记录在ListView的使用的技巧 虽然5.X时代,RecyclerView在很多地方都在逐渐取代ListView,但ListView的使用范围还是很广泛的,它这万年老大哥的地位也不 ...
- memcache占用CPU过高的解决办法
Simon最近为公司服务器操碎了心 , 先是mysqld进程占用CPU过高 , 导致服务器性能变低 ,网站打开太慢.通过增加max_connections及table_cache解决了问题 ,随后发现 ...
- JavaScript系列文章:从let和const谈起
注册博客园账号也有好些年了,有事没事经常来逛逛,感觉博客园的同学们一直都很活跃,相比国内其他社区来讲,这里的技术氛围很浓,非常适合学习和交流,所以博主我也决定在这里驻扎了,在这里,博主希望能坚持写一些 ...
- css随笔1
1.简单清除浏览器样式 *{ padding: 0px; margin: 0px; } 2.得到屏幕范围的div html,body{ width: 1 ...
- Jenkins 安装FAQ
1.对路径的访问被拒绝,如: 解决办法:以管理员模式进入DOS命令窗口,参考Jenkins安装中的第4步: 2.服务不能启动,提示: 解决办法:启动Windows Service(InstallU ...
- ASP.NET MVC移动M站建设-使用51Degree 移动设备的识别
上一篇,介绍了移动M站的建设.说的很简单.觉得好像也没把M站给讲清楚.估计是对移动M站 认识还不够深刻吧.这里,在讲一讲51Degree 这个组件. 51degrees 号称是目前最快.最准确的设备检 ...
- PJAX的实现与应用
一.前言 web发展经历了一个漫长的周期,最开始很多人认为Javascript这们语言是前端开发的累赘,是个鸡肋,那个时候人们还享受着从一个a链接蹦 到另一个页面的web神奇魔术.后来随着JavaSc ...
- 【Win10】SplitView控件
SplitView是Win10中的新控件. 用于呈现两部分视图. 一个视图是主要内容,另一个视图是用于导航.(也就是通常说的汉堡菜单.) 主要结构: <SplitView> <Spl ...
- Maven生命周期小记
1.Maven生命周期是为了所有的构建过程进行抽象和统一.Maven从大量的项目和构建工具中学习和反思,总结了一套高度完善.易扩展的生命周期.这个生命周期包含了项目的清理.初始化.编译.测试.打包.集 ...