49 BOM 和DOM
一.BOM
window 对象
1.确认，输入，
window.alert(123) // 弹框
let ret = window.confirm("是否删除") //确认
let ret =window.prompt(">>>") // 输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script> // window对象 alert
// window.alert(123);
// let ret=window.confirm("是否删除?");
// console.log(ret); //true false
// let ret2=window.prompt("请输入验证码")
// console.log(ret2);
</script>
</head>
<body> </body>
</html>
window 对象中打印，弹框，输入
2.定时器
var ID;
ID = setInterval(func名,1000) ; //设置定时器
clearInterval(ID); //清除定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//计时器 function show_time() {
//// 创建时间字符串
var now = new Date().toLocaleString();//此变量需要放在函数内部
var el = document.getElementById("jishiqi");
el.value =now;
}
var ID; //在函数外部先定义一个ID变量，并不赋值，方便其他函数可以引用该变量
function setTimer() {
//if 判断防止，计时器重复设置，没设置计时器之前ID===underfined
if (ID===undefined){
show_time(); //解决需要等待第一秒的问题
ID = setInterval(show_time,1000);//每隔一秒，执行show_time函数一次
}
}
function stop_time() {
clearInterval(ID);
ID = undefined;
} </script> <input type="text" id ="jishiqi" class="c1">
<button onclick="setTimer()">start</button>
<button onclick="stop_time()">end</button> </body>
</html>
计时器
3.location 对象
location.href ="http://www.baidu.com" 跳转到指定页面
location.assign("http://www.baidu.com")跳转到指定页面 （assign表示分配，指派）
location.href 拿到整个url
location.search 拿url数据部分
location.host
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//location.herf 获取url
//location.search 获取url 后的数据部分
// console.log(location.href);
console.log(location.search);
// location.href = "http://www.baidu.com"; //跳转到指定的页面，此处跳转到百度页面
// location.assign("http://www.taobao.com");//跳转到淘宝页面
console.log(location.host);
</script> </body>
</html>
location对象
二.DOM
文档树结构：树形结构
两个DOM(节点)对象：
1.document对象
2.element对象:所有标签
1.查找标签
1.直接查找
document.getElementById() //一个结果
document.getElementsByTagName() // 数组
document.getElementsByClassName() // 数组
document.getElementsByName() // 数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <div class="c1" id="i1">
<p>123</p>
<div class="c2">222</div>
</div> <div class="c2">333</div> <script>
/*
document.getElementById(); // 一个element对象
document.getElementsByClassName(); // 多个element对象构成的数组
document.getElementsByTagName(); // 多个element对象构成的数组
document.getElementsByName(); // 多个element对象构成的数组
document.getElementsByClassName("c2");
*/
var c1=document.getElementsByClassName("c1")[0];
console.log("c1",c1);
var c2=c1.getElementsByClassName("c2")[0];
console.log(c2) </script>
</body>
</html>
2.导航查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
var ul = document.getElementById("target1");//通过id名获取
var li1 = ul.getElementsByClassName("li1")[0];
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
}
</style> </head>
<body>
<ul class="box" id ="target1" >
<li class="li1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div></div>
<input type="text" name="wang"> <script>
// 导航查找法 var ul = document.getElementById("target1");//通过id名获取
var li1 = ul.getElementsByClassName("li1")[0]; li1.onclick = function (ev) {
// alert(2);
this.style.background = "pink";
};
//获取下一个兄弟节点
var li2 = li1.nextElementSibling;
li2.onclick = function () {
alert("第2个li");
};
var li3 = li1.nextElementSibling.nextElementSibling;
li3.onclick = function () {
alert("第3个li");
};
//获取父节点
var partent = li1.parentElement;
partent.onclick = function (ev) {
this.style.background ="green";
};
//获取父节点下的所有子节点
var lis = partent.children; </script> </body>
</html>
2..标签控制
1.文本控制
var ele = document.getElementById("d1");
1.获取文本节点的内容
ele.innerText //只得到文本 内容
ele.innerHTML //得到ele标签中所有内容，包括标签
2.设置文本内容
ele.innerText ="<a>yuan</a>" // 不识别标签，显示文本原来的样子
ele.innerHTML ="<a>yuan</a>" //可以识别标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <ul>
<li id="i1">123</li>
<li id="i2"><a href="">123</a></li>
<li>234</li>
<li>789</li>
</ul> <script>
let ele=document.getElementById("i2");
// 获取文本
console.log(ele.innerHTML);
console.log(ele.innerText); //赋值文本
//ele.innerHTML="yuan"
//ele.innerText="yuan"
ele.innerHTML="<a href=''>yuan</a>"
ele.innerText="<a href=''>alex</a>" </script>
</body>
</html>
innerHTML和innerText
3.属性控制
attribute操作
ele.setAttribute("egon","123");
ele.getAttribute("egon");
ele.removeAttribute("alex");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body> <ul>
<li id="i1">123</li>
</ul>
<input type="text" id="i2"> <script>
let ele=document.getElementById("i1");
let ele2=document.getElementById("i2");
ele.setAttribute("egon","123");
ele.getAttribute("alex");
ele.getAttribute("egon");
ele.removeAttribute("alex") ;
ele2.value;
ele2.value=0 </script>
</body>
</html>
属性控制attitude
4.class属性控制
ele.classList.add("c3")
ele.classList.remove("c2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: rebeccapurple;
}
.c2{
color: white;
} .c3{
font-size: 28px;
}
</style>
</head>
<body> <div class="c1">Yuan</div> <script>
var ele=document.getElementsByClassName("c1")[0];
ele.classList.add("c3");
ele.classList.remove("c1") </script>
</body>
</html>
class属性控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li,ul{
list-style: none;
} .box{
width: 100%;
height: 600px; }
.box .left{
float: left;
width: 20%;
height: 100%;
background: #a3a3a3;
}
.box .right{
float: right;
width: 80%;
height: 100%;
background: #829094;
}
.box .left .item{
width: 100%;
/*height: 120px;*/
margin-bottom: 5px;
}
.box .left .item p{
width: 100%;
height: 30px;
background: red;
} .hide{
display: none;
} </style>
</head>
<body>
<div class="box">
<div class="left">
<div class="item">
<p class="target">菜单一</p>
<ul class="it hide">
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
<div class="item">
<p class="target">菜单二</p>
<ul class="it hide">
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</div>
<div class="item">
<p class="target">菜单三</p>
<ul class="it hide">
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
</ul>
</div> </div>
<div class="right">
</div> </div> <script>
//找到需要绑定事件的标签
var p_lst = document.getElementsByClassName("target");
for (var i=0;i<p_lst.length;i++){
p_lst[i].onclick = function () {
//把自己的下一个兄弟节点属性，设置为显示 this.nextElementSibling.classList.remove("hide");
//将其他兄弟节点属性，设置为隐藏
for (var j=0;j<p_lst.length;j++){
if(p_lst[j] !==this){
p_lst[j].nextElementSibling.classList.add("hide");
}
} }
} </script>
</body>
</html>
菜单栏
5.css控制
var ele=document.getElementsByClassName("c1")[0];
ele.style.color="red";
ele.style.fontSize="38px"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d" id ="d">
python
</div>
<script>
//css 操作
// var d = document.getElementsByClassName("d")[0];
var d =document.getElementById("d");
d.style.width ="200px";
d.style.height ="200px";
d.style.fontSize="20px";
d.style.color = "green";
d.style.border ="1px solid";
d.style.background ="red";
</script>
</body>
</html>
ccs属性控制
49 BOM 和DOM的更多相关文章
- BOM，DOM，ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- BOM和DOM的区别和关联
BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切. ...
- 实现JavaScript的组成----BOM和DOM
我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...
- BOM和DOM详解
DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- 前端之BOM和DOM
BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...
- BOM和DOM的区别
一.BOM和DOM之间的关系图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象由于window是顶层对象,因此调用它的子对象时可以不显示的指明 ...
- 前端基础之BOM和DOM
关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser object Model)是指浏览器对象模型,它使JavaScript有能力 ...
随机推荐
- mysql函数之四：concat() mysql 多个字段拼接
语法: COUNT(DISTINCT expr ,[expr ...]) 函数使用说明:返回不同的非NULL 值数目.若找不到匹配的项,则COUNT(DISTINCT) 返回 0 Mysql的查询结果 ...
- php array_multisort对数据库结果多个字段进行排序
php array_multisort对数据库结果多个字段进行排序$data 数组中的每个单元表示一个表中的一行.这是典型的数据库记录的数据集合. 例子中的数据如下:volume | edition ...
- 设置(更改)Mysql 自增ID的起始值
SELECT * FROM segwords WHERE id>790511 DELETE FROM segwords WHERE id>790511 #下面这句是设置的 ALTER TA ...
- 在Linux 中进入单用户模式的技巧
在这篇简短的文章中,我们将向你介绍在 SUSE 12 Linux 中进入单用户模式的步骤.在排除系统主要问题时,单用户模式始终是首选.单用户模式禁用网络并且没有其他用户登录,你可以排除许多多用户系统的 ...
- SpringMVC Spring MyBatis 框架整合 Annotation MavenProject
项目结构目录 pom.xml jar包管理 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
- JSP输出HTML时产生的大量空格和换行的去除方法
在WEB应用中,如果使用jsp作为view层的显示模板,都会被空格/空换行问题所困扰. 这个问题当年也困扰了我比较长的时间.因为在jsp内使用的EL标签和其他标签时,会产生大量的空格和换行符. ...
- 【译】理解node.js事件轮询
Node.js的第一个基本论点是I/O开销很大. 当前编程技术中等待I/O完成会浪费大量的时间.有几种方法可以处理这种性能上的影响: 同步:每次处理一个请求,依次处理.优点:简单:缺点:任何一个请求都 ...
- python文件操作-r、w、a、r+、w+、a+和b模式
对文件操作的基本步骤 f=open('a.txt','r',encoding='utf-8') data=f.read() print(data) f.close() 文件的打开和关闭使用open() ...
- bzoj1649 / P2854 [USACO06DEC]牛的过山车Cow Roller Coaster
P2854 [USACO06DEC]牛的过山车Cow Roller Coaster dp 对铁轨按左端点排个序,蓝后就是普通的二维dp了. 设$d[i][j]$为当前位置$i$,成本为$j$的最小花费 ...
- C 运算优先级口诀
运算优先级口诀: 括号成员第一; //括号运算符[]() 成员运算符. -> 全体单目第二; //所有的单目运算符比如!.~.++. --. +(正). -(负) ...