javascript-dom文档对象模型2
每个标签都是一个对象
一：查找元素
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2、间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
二：操作元素
1、内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">
老男孩
<a>谷<span>歌</span></a>
</div>
<input type="text" id="i2" />
<select id="i3">
<option value="11">北京1</option>
<option value="12">北京2</option>
<option value="13">北京3</option>
</select>
<textarea id="i4"></textarea>
</body>
</html>
搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto;">
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/> <input type="text" placeholder="请输入关键字" />
</div> <script>
function Focus(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val == "请输入关键字"){
tag.value = "";
}
}
function Blur(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val.length ==0){
tag.value = "请输入关键字";
}
}
</script>
</body>
</html>
2、属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
增加输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="AddEle1();" value="+" />
<input type="button" onclick="AddEle2();" value="+" />
<div id="i1">
<p><input type="text" /></p> </div>
<script>
function AddEle1(){
// 创建一个标签
// 将标签添加到i1里面
var tag = "<p><input type='text'/></p>";
// 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
function AddEle2(){
// 创建一个标签
// 将标签添加到i1里面
var tag = document.createElement('input');
tag.setAttribute('type', 'text');
tag.style.fontSize = '16px';
tag.style.color = 'red'; var p = document.createElement('p');
p.appendChild(tag); document.getElementById('i1').appendChild(p);
}
</script>
</body>
</html>
3、class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
4、标签操作
1）字符串形式
2）对象方式
docment.createElement()
例子同上
5、样式操作
##dom-输入框鼠标移动到输入框去除默认值 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="margin: 0 auto">
<input id="i1" type="text" value="请输入关键词" onfocus="Focus();" onblur="Blur();"/> <!-- 新浏览器直接支持下面方式-->
<input type="text" placeholder="请输入关键词">
</div>
<script>
function Focus(){
var tag=document.getElementById("i1")
var value=tag.value
if (value=="请输入关键词"){
tag.value=""
}
}
function Blur(){
var tag=document.getElementById("i1")
var value=tag.value
if (value==""){
tag.value="请输入关键词"
}
}
</script>
</body>
</html>
6、位置操作
总文档高度
document.documentElement.offsetHeight 当前文档占屏幕高度
document.documentElement.clientHeight 自身高度
tag.offsetHeight 距离上级定位高度
tag.offsetTop 父定位标签
tag.offsetParent 滚动高度
tag.scrollTop /*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
7、提交表单
document.geElementById('form').submit()
8、其他操作
console.log 输出框
alert 弹出框
confirm 确认框 // URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载 // 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
##定时器 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="li"></div>
<input type="button" value="增加提示" onclick="tip();">
<script>
function clear(){
var tag=document.getElementById("li");
tag.innerText="";
}
function tip(){
var tag=document.getElementById("li");
tag.innerText="提示信息";
setTimeout("clear()",300);
} </script>
</body>
</html>
javascript-dom文档对象模型2的更多相关文章
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
- JavaScript的文档对象模型DOM
小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...
- xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- JavaScript学习总结（一）DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
- JS第二部分--DOM文档对象模型
一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...
- JavaScirpt(JS)——DOM文档对象模型
一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...
- DOM 文档对象模型
document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...
随机推荐
- 课堂Beta发布
项目组名:奋斗吧兄弟 小组成员:黄兴,李俞寰,栾骄阳,王东涵,杜桥 今天6个小组在课上进行了Bate发布,以下是我的一些看法: 飞天小女警的礼物挑选系统: 由于是第一个Bate发布的项目,所以我印象较 ...
- final评论1
1-约跑APP 小组准备的非常的充分,还带了摄像头,发布过程清晰.团队的约跑项目界面相较于Beta版本进行了美化,增加了背景图片,使项目看起来更美观.同时项目支持聊天信息的接收和发送,个人觉得他们组的 ...
- Linux命令（二十） 显示系统内存状态 free
一.命令简介 free 命令会显示内存的使用情况,包括实体内存,虚拟的交换文件内存.共享内存区段,以及系统核心使用的缓冲区等. 二.参数说明 -b 以Byte为单位显示内存使用情况 -K 以KB为单位 ...
- Linux命令(二十六) 用户管理命令
一.添加用户 useradd useradd 命令用于创建新用户,格式为useradd [选项] 用户名. 可以使用 useradd 命令创建用户帐户,使用该命令创建账户时,默认的用户目录在 /hom ...
- 写出完整版的strcpy函数及其他如：strcat,strcmp,strstr的函数实现
(---牛客网中刷题---)写出完整版的strcpy函数 如果编写一个标准strcpy函数的总分值为10,下面给出几个不同得分的答案: 2分 1 2 3 4 void strcpy( char *st ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：2. 实现绘图功能
1. 理解 kivy 坐标系统 上一节中,咪博士带大家实现了画板程序的基础框架,以及一个基本的自定义窗口部件(widget).在上一节的末尾,咪博士留了一道关于 kivy 坐标系统的思考题给大家.通过 ...
- DBA 这个角色
下面这些领域的技能可以提升DBA团队对公司业务产生正面影响的重要能力: ---------------------------------------------------------------- ...
- HGOI20180823 三校联考
首测:220qwq(算差的好吧) 后来改了一个地方:300qwq(算慢的好吧) std被踩qwq 注意:输入数据第一行忘记输入n,亲脑补 题解: 多项式除法(若最后除出的答案为1那么就是成功),对于f ...
- sadpairs
#include<bits/stdc++.h> #define il inline #define reg register int #define numb (ch^'0') using ...
- [SDOI2017]硬币游戏
考虑生成函数来做 g(x)函数就是0+0*x+...+1*x^s+...+|∑|^(n-s)x^n 就是最后s位必须填这个串,但是前面随便填的方案数 然后枚举之前出现了哪个串(包括自己),如果没有相交 ...