一.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的更多相关文章

  1. BOM,DOM,ECMAScripts三者的关系

    一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁.   DOM下,HTM ...

  2. BOM和DOM的区别和关联

    BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系密切. ...

  3. 实现JavaScript的组成----BOM和DOM

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...

  4. BOM和DOM详解

    DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...

  5. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  6. 从零开始的JS生活(二)——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  7. 前端之BOM和DOM

    BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...

  8. BOM和DOM的区别

    一.BOM和DOM之间的关系图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象由于window是顶层对象,因此调用它的子对象时可以不显示的指明 ...

  9. 前端基础之BOM和DOM

    关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser  object  Model)是指浏览器对象模型,它使JavaScript有能力 ...

随机推荐

  1. Ignite集群管理——基于静态IP的节点发现

    Ignite作为分布式内存,集群管理必不可少,Ignite支持基于组播,静态IP,Zookeeper,JDBC等方式发现节点,本文主要介绍基于静态IP的节点发现. 两个最重要的TCP通信设置类: 1. ...

  2. nginx的权限问题(Permission denied)解决办法

    nginx的权限问题(Permission denied)解决办法 一个nginx带多个tomcat集群环境,老是报如下错误:failed (13: Permission denied) while ...

  3. 关于阿里云专有网络搭建FTP服务器的深坑

    之前用的FTP服务器都是,随便搭建一下就能用了, 昨天因为服务器的问题,换了个服务器,搭建FTP服务器的时候发现, 搭建的服务器居然只能使用 主动模式访问,改成被动后 无法获取目录, 百度了 各大论坛 ...

  4. 通过Java 线程堆栈进行性能瓶颈分析

    改善性能意味着用更少的资源做更多的事情.为了利用并发来提高系统性能,我们需要更有效的利用现有的处理器资源,这意味着我们期望使 CPU 尽可能出于忙碌状态(当然,并不是让 CPU 周期出于应付无用计算, ...

  5. 递增三元组|2018年蓝桥杯B组题解析第六题-fishers

    标题:递增三元组 给定三个整数数组 A = [A1, A2, ... AN], B = [B1, B2, ... BN], C = [C1, C2, ... CN], 请你统计有多少个三元组(i, j ...

  6. centos6搭建redis集群搭建(单机多节点)

    一.安装redis 1.安装gcc环境 yum install gcc-c++ 2.下载源码包并解压 wget http://download.redis.io/releases/redis-3.2. ...

  7. Linux 操作 mysql

    linux mysql 操作命令 [转 来源] 1.linux下启动mysql的命令:mysqladmin start/ect/init.d/mysql start (前面为mysql的安装路径) 2 ...

  8. 【jdk源码分析】java.lang.Appendable

    1.概述 public interface Appendable 能够被添加 char 序列和值的对象.如果某个类的实例打算接收取自 Formatter 的格式化输出,那么该类必须实现 Appenda ...

  9. 51nod 1444 破坏道路(最短路)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1444 题意: 思路: 哇,思路爆炸. 因为每条边的权值都为1,所以可以直 ...

  10. UVa 821 网页跳跃(Floyd)

    https://vjudge.net/problem/UVA-821 题意:给出一个有向图,任意两点都可相互到达,求任意两点的最短距离的平均值. 思路:求两点的最短距离,用Floyd算法很方便,最后加 ...