//找元素

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对象操作：浏览器页面文件的更多相关文章

  1. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  2. 使用document对象操作cookie

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

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

    Windows对象主要是操作浏览器外层的东西,而DOM对象是操作浏览器里面的东西. 如果我们要操作网页内容,那么一定需要操作标签! Document:文档对象模型→DOM:可以做一些特效(抢票的).摘 ...

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

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

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

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

  6. 『心善渊』Selenium3.0基础 — 18、使用Selenium操作浏览器的弹窗

    目录 1.操作浏览器自带弹窗 2.操作浏览器页面自定义弹窗 1.操作浏览器自带弹窗 (1)说明: webdriver中处理JavaScript所生成的alert.confirm 以及prompt 弹窗 ...

  7. html5之history对象 控制浏览器前进或后退事件

    一.摘要: 总结用history对象操作浏览器的历史记录的方法,在项目中使用的是mui框架,总结中包括我在实际项目中遇到的问题. 二.总结: 实现效果: 实现代码: 上面的编辑页面加载的时候就要先调用 ...

  8. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

  9. Python3+Selenium2完整的自动化测试实现之旅（四）：Selenium-webdriver操作浏览器、Cookie、鼠标键盘、警示框、设置等待时间、多窗口切换

    本篇学习总结webdriver模块操作浏览器.Cookie.鼠标键盘.警示框.设置等待时间.多窗口切换等方法的使用 1    浏览器控制 Selenium-webdriverAPI提供了对页面元素定位 ...

随机推荐

  1. POJ 1511 - Invitation Cards 邻接表 Dijkstra堆优化

    昨天的题太水了,堆优化跑的不爽,今天换了一个题,1000000个点,1000000条边= = 试一试邻接表 写的过程中遇到了一些问题,由于习惯于把数据结构封装在 struct 里,结果 int [10 ...

  2. Nginx环境中如何将HTTP跳转至HTTPS设置

    如果我们VPS服务器的WEB环境采用的是NGINX架构,那如果我们将安装SSL证书的网站希望强制跳转至HTTPS网站URL的时候那需要如何设置呢?这里个人建议是这样的,我们必须要强制一个地址,这样网站 ...

  3. 【转】 全世界最短的IE判定

    以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的. var ie = !+"\v1"; 仅仅需要7bytes!讲述外国人是如何把IE的判定从32 bytes一步步缩简成7 ...

  4. 【Maven】使用Maven构建多模块项目

    Maven多模块项目 Maven多模块项目,适用于一些比较大的项目,通过合理的模块拆分,实现代码的复用,便于维护和管理.尤其是一些开源框架,也是采用多模块的方式,提供插件集成,用户可以根据需要配置指定 ...

  5. 4.27-4.30webstorm

    本周学习了html的基础课程,运用的软件是webstorm,网页的结构大体为: <html><head> My First Heading </head> < ...

  6. Log4j 配置数据库连接池（将日志信息保存到数据库）

    org.apache.log4j.jdbc.JDBCAppender 是利用传统的 JDBC 连接方法,这种方式连接数据库效率低下,为了解决这个问题,现在自定义一个 Log4j 的 Appender, ...

  7. URAL - 1920 Titan Ruins: the Infinite Power of Magic(乱搞)

    搞死人的题目,,, 就是在n*n的方格中找路径长度为L的回路. 开始的思路值适合n为偶数的情况,而忽视了奇数的case,所以wa了一次. 然后找奇数case的策略,代码从70多行变成了100多,然后改 ...

  8. java 继承多态的一些理解不和不理解

    1.向上转型的一个误区 一直以为Child 继承Parent以后, Parent p = new Child();  p可以调用Child类中拓展Parent的方法,原来必须在强制转换成Child类才 ...

  9. 【概念笔记】JavaEE - web part1

    IT`huhui前言录 想对学习的内容进行下简易的总结方便自己回头复习. 但是还有很多地方是不完善的需要慢慢修改. 持续更新. Web 服务器 IIS 微软主推 Apache C写的 Tomcat j ...

  10. 微软BI 之SSIS 系列 - ETL 转换时关于 Code Page (1252 and 936) 转换错误的原因和解决方法

    开篇介绍 最近经常碰到在 ETL 练习中出现这种转换失败的问题,试了多种方式,同样的代码同样的源结构和表结构但是一直不能成功执行,包报错.一般有这么几种错误: Error at DST_LOAD_DA ...