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有能力 ...
随机推荐
- Postman: Pre-request Script,设置body 变量
1)Postman Pre-request Script 设置变量名 2)把变量放在body里 3)Send后查看变量是否被替换
- python选择排序算法总结
选择排序算法: a=[6,5,4,3,2,1] 算法思路: 第一步:在列表的第一个位置存放此队列的最小值 声明一个变量min_index等于列表的第一个坐标值0 从第一个位置0坐标开始,和它后边所有的 ...
- 修改MySQL数据库中表和表中字段的编码方式的方法
今天向MySQL数据库中的一张表添加含有中文的数据,可是老是出异常,检查程序并没有发现错误,无奈呀,后来重新检查这张表发现表的编码方式为latin1并且原想可以插入中文的字段的编码方式也是latin1 ...
- web前端----jQuery基础语法
一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...
- 利用Python网络爬虫爬取学校官网十条标题
利用Python网络爬虫爬取学校官网十条标题 案例代码: # __author : "J" # date : 2018-03-06 # 导入需要用到的库文件 import urll ...
- 安装mysql_cluster报错: Data::Dumper丢失
步骤 安装包:mysql-cluster-gpl-7.3.5-linux-glibc2.5-x86_64.tar.gz 下载解压到/usr/local/mysql mkdir /usr/local/m ...
- 如何让VS2012编写的程序在XP下运行
Win32主程序需要以下设置 第一步:在工程属性General设置 第二步:在C/C++ Code Generation 设置 第三步:SubSystem 和 Minimum Required Ve ...
- tensorflow拟合随机生成的三维数据【学习笔记】
平台信息:PC:ubuntu18.04.i5.anaconda2.cuda9.0.cudnn7.0.5.tensorflow1.10.GTX1060 作者:庄泽彬(欢迎转载,请注明作者) 说明:感谢t ...
- Weex 简介
weex简介 Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 ...
- xshell5 Linux 上传下载文件
1,先登录身份验证和文件传输ZMODEM 选择自动激活. 2,rpm -qa | grep lrzsz 利用此命令查看是否安装了lrzsz . 如果没有任何反应则是没有安装 若没有安装 yum ins ...