document对象操作:浏览器页面文件
//找元素
1.根据id找
<div id="d1" cs="ceshi"><span>document对象</span></div>
//var d1 = document.getElementById("d1");
//alert(d1);
2.根据class找
<div class="d">111</div>
<span class="d">222</span>
//var d2 = document.getElementsByClassName("d");
//alert(d2[1]); //d2[] 框中是想要显示的索引号,d2[0]就是显示的div,d2[1]就是显示的span
3.根据标签名找
//var d3 = document.getElementsByTagName("div");
//alert(d3[0]);
4.根据name找
<input type="text" name="aa" id="b1" value="biaodan" />
<input type="text" name="aa" />
//var d4 = document.getElementsByName("aa");
//alert(d4[0]); ////d4[] 和上面的d2一样
//操作元素:操作内容、操作属性、操作样式
<style type="text/css">
#d3{ color:red}
</style>
<body>
<div id="d1" cs="ceshi"><span>document对象</span></div>
<div class="d">111</div>
<span class="d">222</span>
<input type="text" name="aa" id="b1" value="biaodan" />
<input type="text" name="aa" />
<div id="d3" style="width:100px; height:100px; background-color:#636">111</div>
<input type="button" value="获取" onclick="showa()" />
<input type="button" value="设置" onclick="set()" />
</body>
1.操作内容:非表单元素、表单元素
非表单元素
//var d1 = document.getElementById("d1");
//1.获取文本
//alert(d1.innerText);
//2.设置文本
//d1.innerText = "hello";
//3.获取html代码
//alert(d1.innerHTML);
//4.设置html代码
//d1.innerHTML = "<b>加粗文字</b>";
表单元素
//var b1 = document.getElementById("b1");
//1.赋值
//b1.value = "ceshi";
//2.获取值
//alert(b1.value);
2.操作属性
//1.添加属性
//var d1 = document.getElementById("d1");
//d1.setAttribute("bs","1");
//2.获取属性
//alert(d1.getAttribute("cs"));
//3.移除属性
//d1.removeAttribute("cs");
3.操作样式
function showa()
{
//1.获取样式,只能获取内联样式
var d3 = document.getElementById("d3");
alert(d3.style.color);
}
function set()
{
var d3 = document.getElementById("d3");
//2.设置样式
d3.style.backgroundColor = "red";
}
document对象操作:浏览器页面文件的更多相关文章
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- 使用document对象操作cookie
1. 使用document对象的cookie属性,可以让你读取.添加和更新文档(当期HTML)所关联的cookie. 2. 当你读取document.cookie时,会得到当期文档的所有cookie. ...
- Document对象操作、样式、属性、效果、
Windows对象主要是操作浏览器外层的东西,而DOM对象是操作浏览器里面的东西. 如果我们要操作网页内容,那么一定需要操作标签! Document:文档对象模型→DOM:可以做一些特效(抢票的).摘 ...
- JS中基本window.document对象操作以及常用事件!
一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...
- document对象-操作元素的文档结构
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
- 『心善渊』Selenium3.0基础 — 18、使用Selenium操作浏览器的弹窗
目录 1.操作浏览器自带弹窗 2.操作浏览器页面自定义弹窗 1.操作浏览器自带弹窗 (1)说明: webdriver中处理JavaScript所生成的alert.confirm 以及prompt 弹窗 ...
- html5之history对象 控制浏览器前进或后退事件
一.摘要: 总结用history对象操作浏览器的历史记录的方法,在项目中使用的是mui框架,总结中包括我在实际项目中遇到的问题. 二.总结: 实现效果: 实现代码: 上面的编辑页面加载的时候就要先调用 ...
- HTML DOM Document 对象
HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...
- Python3+Selenium2完整的自动化测试实现之旅(四):Selenium-webdriver操作浏览器、Cookie、鼠标键盘、警示框、设置等待时间、多窗口切换
本篇学习总结webdriver模块操作浏览器.Cookie.鼠标键盘.警示框.设置等待时间.多窗口切换等方法的使用 1 浏览器控制 Selenium-webdriverAPI提供了对页面元素定位 ...
随机推荐
- 点亮一个led灯
/********************************* 代码功能:点亮一个led灯 使用函数: pinMode(引脚号,模式); digitalWrite(引脚号,电平状态); //默认 ...
- Springmvc4 com/fasterxml/jackson/core/JsonProcessingException
非常感谢: 谭卓博客 springmvc4 json springmvc4 集成hibernate4 出现 NoClassDefFoundError:com/fasterxml/jackson/cor ...
- Selenium2+python自动化26-js处理内嵌div滚动条
前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.
- locutus(phpjs) 的使用
今天来介绍一个js的框架,这个框架的主要功能呢,是通过加载该类库,来实现php函数的调用 当然了,这并不是说php中所有的函数都能在js中使用,但很大一部分是可以的. 环境:mac + node v5 ...
- jquery中html()、text()、val()的区别与使用
.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. .html(),.text(),.val()三种方法都 ...
- 20145225《Java程序设计》 第7周学习总结
20145225<Java程序设计> 第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1认识时间与日期 时间的度量:GMT.UT.TAI.UTC.Unix.epoch. 年历 ...
- 集合与Iterator
Iterator模式 是遍历集合类的标准访问方法.为的是不暴露类的内部结构,将访问逻辑从集合类中抽象出来. 想循环遍历数组,链表等结构数据,客户端都必须事先知道集合的内部结构,访问代码和集合本身是紧耦 ...
- 修改ubuntu DNS的步骤(图文)
有时候连接上VPN服务器后,还是打不开某些网站,这时候,需要对DNS进行更改,一般是修改成为谷歌提供的免费DNS:8.8.8.8 8.8.4.4,在windows下更改比较简单(点击查看“连接上VP ...
- 基本套接字编程(3) -- select篇
1. I/O复用 我们学习了I/o复用的基本知识,了解到目前支持I/O复用的系统调用有select.pselect.poll.epoll.而epoll技术以其独特的优势被越来越多的应用到各大企业服务器 ...
- Unity5的AssetBundle的一点使用心得
昨天一位朋友在我这里留言,想让我写点Unity5的AssetBundle心得.于是我就看了相关的介绍,和自己确切的做了一次.下面来谈谈所谓的心得. 如果你觉得自己对AssetBundle不熟悉,建议先 ...