JavaScript的DOM操作-重点部分-第一部分
Window.document 对象
一、找到元素
document.getElementById("id"); 根据id找,最多找一个;
var a = document.getElementById("id"); 将找到的元素放在变量中;
document.getElementsByName("name"); 根据name找,找出来的是数组;
document.getElementsByTagName("name"); 根据标签名找,找出来的是数组;
document.getElementsByClassName("name"); 根据Classname找,找出来的是数组;
二、操作内容
1)获取内容:
alert(a.innerHTML); 标签里的HTML代码和文字都获取了;
例如:
body中这么一个div:<div id="me"><b>试试吧</b></div>,在script中使用 innerHTML 获取 div 中的内容:
var a = document.getElementById("me");
alert(a.innerHTML);
alert(a.innerText); 只取里面的文字;
alert(a.outHTML); 包括标签本身的内容;(inner不包括外标签,而out包括外标签)
2)设置内容
a.innerHTML="<font color='red'>Hello World</font>"; 如果用设置内容代码结果如下,div中内容被替换了:
a.innerText 会将赋值的东西原样呈现
情况内容:赋值个空字符串;
2、表单元素:
1)获取内容,有两种获取方式:
var t = document.f1.t1; form表单ID为f1里面的ID为t1的input;
var t = document.getElementById("id"); 直接用id获取;
alert(t.value); 获取input中的value值;
alert(t.innerHTML); 获取<textarea>这里的值</textarea>;
2)设置内容:t.value="内容改变";
3、一个小知识点:
<a href="www.baidu.com" οnclick="return.flase">转向百度</a>;加了 return.flase 则不会跳转,默认是 return.ture 则会跳转。按钮也一样,如果按钮中设置 return.flase 则不会进行提交,利用这个可以对提交跳转进行控制。
三、操作属性
首先利用元素的ID找到该元素,存于一个变量中:
var a = document.getElementById("id");
然后可以对该元素的属性进行操作:
a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;
a.getAttribute("属性名"); 获取属性的值;
a.removeAttribute("属性名"); 移除一个属性;
例:1:做一个问题,如果输入的答案正确则弹出正确,错误则弹出错误;
这里在text里面写了一个daan属性,里面存了答案的值,点击检查答案的时候cheak输入的内容和答案是否一样:
例子2:同意按钮,倒计时10s,同意按钮变为可提交的,这里用了操作属性:disabled来改变按钮的状态,当disabled="disabled"时按钮不可用。
四、操作样式
首先利用元素的ID找到该元素,存于一个变量中:
var a = document.getElementById("id");
然后可以对该元素的属性进行操作:
a.style.样式=""; 操作此ID样式的属性。
样式为CSS中的样式,所有的样式都可以用代码进行操作。
document.body.style.backgroundColor="颜色"; 整个窗口的背景色。
操作样式的class:a.className="样式表中classname" 操作一批样式
例子:展示图片的手动和自动切换(单独用一篇来做)
转载于:https://www.cnblogs.com/baimangguo/p/6064150.html
JavaScript的DOM操作-重点部分-第一部分相关推荐
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Javascript核心DOM操作 学习笔记
DOM .BOM Day01 DOM 1.web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 2.API和Web APIs 2.1 API 2.2 We ...
- JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
- 【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名 一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
- 03.JavaScript对DOM操作
JavaScript引入方式 外部引入 在head或者body中,添加以下代码 <script type="text/javascript" src="js/dem ...
- 加速Javascript:DOM操作优化
原文:<Speeding up JavaScript: Working with the DOM> 作者: KeeKim Heng, Google Web Developer 在我们开发互 ...
- (转)Javascript的DOM操作 - 性能优化
转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维 ...
- JavaScript 的DOM操作
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. Windows 对象操作 ...
- JavaScript的DOM操作
什么是DOM? DOM(Document Object Model)文档对象模型是指页面中的文档比如(HTML .XML等)它是一个树状结构其中包含着许多节点,二节点又分为一下几种: 元素节点 文本节 ...
最新文章
- centos 安装 mysql 5.7
- mic系统装java开发软件_Windows下安装MicMac
- python3.6进度条_Python实现下载界面(带进度条,断点续传,多线程多任务下载等)...
- uiautomation遍历windows所有窗口_万字长文!滑动窗口看这篇就够了!
- mysql安装包下载密码_MySQL解压包的安装与下载的图文教程
- 前端学习(3215):类的编写
- for相关 java_Java学习之for循环相关知识梳理
- 将米转换为度(经纬度) 画圆上下多出来一些区域
- 邻居家小孩来问WiFi密码,告诉后邻居家竟然几部手机电视全用上,该怎么办?
- Struts Menu中基于角色的权限管理
- php moodle mysql_搭建基于Windows + Apache + PHP + MySQL的Moodle平台
- 达摩院发布:2022年十大科技趋势
- 各平均数介绍(算数平均数、几何平均数、加权算术平均数)
- FPGA之旅设计99例之第九例-----驱动0.96寸OLED屏
- PS 滤镜——(扭曲)球面化 Spherize
- arduino电风扇程序_Arduino实验项目:温控电风扇
- 【应急响应】黑客入侵应急分析手工排查
- Ubuntu-20.04永久修改DNS服务器
- 「高效程序员的修炼」快速上手python主流测试框架pytest以及单元测试编写
- win10电脑中病毒了怎么办,win10电脑中毒怎么解决
热门文章
- HttpClient连接池抛出大量ConnectionPoolTimeoutException: Timeout waiting for connection异常排查...
- my-large.cnf
- 36.centos 安装文泉驿字体
- springside / springside4—CRUD页面教程
- 3.5.6 轮询访问介质访问控制
- 从TimeQuest角度看set_max_delay
- 【深度解析】FPGA四大设计要点
- Word提供的【样式和格式】设计!
- Linux版本之redhat9---gFtp中文乱码解决方案
- 人工智能可落地项目总结