JavaScript进阶学习-webAPI（总结）

webAPI

DOM

概念

JS分三个部分：

ECMAScript标准：js的基本语法

DOM：Document object model —文档对象模型—操作页面的元素

BOM: Browser object model —>浏览器对象模型—操作的是浏览器

DOM文档对象模型

文档

把一个HTML文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象

XML

文件也可以看成是一个文档，侧重于存储数据

HTML

展示信息，展示数据的；文件看成是一个文档，那么这个文档看成是一个对象，文档中的所有的标签都可以看成是一个对象

页面中的每个标签，都是一个元素（element），每个元素都可以看成是一个对象

案例体验

//点击操作：---->事件：就是一件事，有触发和响应，事件源
// 按钮被点击，弹出对话框
// 按钮--->事件源
// 点击---->事件名字
// 被点了--->触发了
// 弹框了--->相应
//HTML代码，点击按钮弹出对话框，对话框：alert()===>js的代码
//	html代码嵌入了js的代码，不方便后期的修改和维护
input type="button" value="显示效果" onclik="alert('wo beidianle')"
//最终的效果：应该把JS代码和html分离
function f1() {
   
  // 函数中可以写很多的代码
  alert("这是一个弹窗")
}
input type="button" value="显示效果" onclick="f1()"

//	开始分离html 和js
input type="button" value="开始分离" id="btn"
function f2() {
   
  alert("开始分离html和js代码")；
}
//html标签中的id属性中存储的值是唯一的
//id属性就像是人的身份证号码一样，不能重复，页面中的唯一标识
//	从文档中找到ID值为BTN的这个标签元素

//	最终版
 <input type="button" value="最终版" id="btn1">
   var btnobj1=document.getelementbyid("btn1")
btnobj1.onclick=function () {
   
  alert("哦,这真是太好了")
};
// 或者

document.getelementbyid("btn1")onclick=function () {
   
  alert("哦,这真是太好了")
};
//	先有按钮，才能获取，获取之后才能注册事件

// 根据id属性的值从文档中获取这个元素

点击按钮显示图片案例

input type="button" value="显示图片" id="btn"
img src="" alt="" id="im"
//	根据id获取按钮
var btnobj=document.getelementbyid("btn")
//	为按钮注册点击事件，添加事件处理函数
btnobj.onclick=function () {
   
  // 根据id获取图片的标签，设置图片的src属性值
  var imobj=document.getelemtnbyid("im")
  imobj.src="imgages../../"
  //	设置图片的大小
  imobj.width="300";
  imobj.height="400";
};

点击按钮修改P标签文本内容

凡是成对的标签，中间的文本内容，设置的时候都使用innertext这个属性的方式

input type="button" value="设置p的内容" id="btn"
<p id=p1>哈哈哈哈哈</p>
document.getelementbyid("btn").onclick=function(){
   
  //	根据id获取p标签，设置内容
  document.getelementbyid("p1").innertext="这是一个P"
}

点击按钮修改a标签的地址和热点文字

input type=button value="显示效果" id="btn"
<a id="ak" herf="baidu">asdasd</a>
document.getelementbyid("btn").onclick = function () {
   
  //	根据id获取超链接，设置href属性
  var aobj = document.getelementbyid("ak")
  aobj.href = "asdasdasdad";
  aobj.innertext = "传智博客"
}；

点击按钮修改多个p标签的文字

input type="button" value="设置p的内容" id="btn"
<div	id="da1">
<p>哈哈哈哈哈</p>
<p>哈哈哈哈哈</p>
<p>哈哈哈哈哈</p>
<p>哈哈哈哈哈</p>
</div>
<div id="da2">
<p>aaaaaaaa</p>
<p>aaaaaaaa</p>
<p>aaaaaaaa</p>
<p>aaaaaaaa</p>
</div>
document.getelementbyid("btn").onclick=function(){
   
 //	根据id获取p标签，设置内容
var podjs=document.getelementbyid("dv1").getelementsbytagname("p");
 //	循环遍历这个数组
 for(var i=0;i<pobjs.length;i++) {
   
   //	每个p便签，设置问题
   pobjs[i].innertext="我们都是p"
 }
}；

案例点击按钮修改图片的alt和title

input type="button" value="显示效果" id="btn"
img src=".././/.//." alt="aa" title="sss"

document.getelementbyid("btn").onclick = function() {
   
   //	返回的是一个伪数组
  var imgobjs = document.getelementbytagname("img");
  imgobjs[0].alt = "改了"；
  imgobjs[0].title = "aaaa";
};

案例点击按钮修改多个文本框的值

input type="button" value="修改文本框的值" id="btn"
input type="text" value=""
input type="text" value=""
input type="text" value=""
input type="text" value=""
input type="text" value=""
//script
document.getelementbyid("btn").onclick=function () {
   
  //获取所有的文本框
  var inputs=document.getelementbytagname("input");
  for(var i=0;i<inputs.length;i++){
   
    //判断这个元素是不是按钮
    if(inputs[i].type!="button") {
   
      inputs[i].value="aaaaaaavav"
    }
  }
};

点击每个图片弹出对话框

img src="../../../" alt=""  id="im1"
img src="../../../" alt=""	id="im2"
img src="../../../" alt=""	id="im3"
document.getlementbyid("im1").onclick=function() {
   
  alert("被点击了")
}；
document.getlementbyid("im2").onclick=function() {
   
  alert("被点击了")
}；
document.getlementbyid("im3").onclick=function() {
   
  alert("被点击了")
}；
// 根据标签标签的名字获取图片标签，分别注册点击事件
var ingobjs=document.getelementsbytagname("img");
for(var i=0 ;i<imgobjs.length;i++) {
   
  imgobjs[i].onclick=function () {
   
    alert("被点了")
  };
}

点击按钮修改按钮的属性

input type="button" value="按钮" id="btn"
var btnobj = document.getelementbyid("btn");
btnobj.onclik = function() {
   
  // 修改按钮属性
  this.value = "我是按钮，谁咬我，我咬谁"；
  this.type = "text";
  this.id = "btn2";
}

###在某个事件中，自己的时间中的this就是当前的这个元素对象

点击图片修改自身宽高

img src="../../" ali="" id="im"
var imgobj = document.getelementbyid ("im");
imgobj.onclick = function() {
   
  this.width = "200";
  this.height = "300";
};

排他功能

input type="button" value="没怀孕"
input type="button" value="没怀孕"
input type="button" value="没怀孕"
input type="button" value="没怀孕"
input type="button" value="没怀孕"
// 获取所有的按钮，分别注册点击事件
var btnobjs = document.getelementsbytagname("input");
//	循环遍历所有的按钮
for (var i=0;i < btnobjs.length;i++) {
   
  // 为每个按钮都要注册点击事件
  btnobjs[i].onclick= function(){
   
     //	把所有的按钮的value值设置为默认的值：没怀孕
    for (var j=0; j<btnobjs.length;j++) {
   
     btnobjs[j].value = "没怀孕" 
    }
    this.value = "怀孕了"； 
  }；
}
//	for循环是在页面加载的时候，执行完毕了
//	事件是在出发的时候，执行的

点击按钮修改图片

input type="button" value = "显示大图" id="btn"
img sec="../../" alt="" id="im"
//
function my$(id) {
   
  return document.getelementbyid(id);
}
my$('btn').onclick=function () {
   
  my$("im").src="../../";
};

点击按钮修改性别

input type="button" valur="修改性别" id="btn1"
input type="radio" value="1" name="sex1"   男
input type="radio" value="2" name="sex2" id="rad1"  女
input type="radio" value="3" name="sex3"   保密
//规律：在表单标签中，如果属性和值只有一个，并且值是这个属性本身，那么，那么在写js代码，Dom操作的时候，这个属性值，是布尔类型就可以了。
function(id) {
   
  return document.getelementbyid(id);
}
my$("btn1").onclick = function() {
   
my$("rad1").checked = true;
};

input type="button" value="选择兴趣" id="btn2"
input type="checkbox" value="1" name="xingqu" 吃饭
input type="checkbox" value="2" name="xingqu" 睡觉
input type="checkbox" value="3" name="xingqu" 打豆豆
input type="checkbox" value="4" name="xingqu" 打篮球
input type="checkbox" value="5" name="xingqu" 打足球
input type="checkbox" value="6" name="xingqu" 打铅球
//	方法同上

点击按钮选择菜单

input type="button" value="点菜" id="btn"
select name="" id="ss"
option value="1" aa /potion
option value="2" bb /potion
option value="3" cc /potion
option value="4" id="op1" dd /potion
/select
my$("btn").onclick = function() {
   
  // 点击选择
  my$("op1").selected=true;
}
//	多行文本
//	disabled 这个属性是禁用的
//	readonly  只读
//	html属性中属性和值是自己的，并且只有一个，其实，可以只写这个属性，不用赋值

点击按钮设置div的宽和高

input type="button" value="设置样式" id="btn"
div id="dv" style="width=200px" /div
//	凡是css中这个属性是多个单词的写法，在js代码dom操作的时候 把-干掉,后面的单词首字母大写即可
function my$(id) {
   
  return getelementbyid(id).onclick
}
my$(dv).onclick = function() {
   
  my$(dv).style.width="300px";
    my$(dv).style.height="300px";
    my$(dv).style.backgroundColor="pink";
  
}

点击按钮设置div隐藏

div {
   
  width:300px;
  height：300px;
  bgc:pink;
}
div id="dv" /div
input type="button" vluce="隐藏" id="btn"
//	根据id获取按钮，注册点击事件，添加事件处理函数
my$("btn").onclick = function () {
   
  my$("dv").style.display="none";
}


// 根据id获取按钮,注册点击事件，添加事件处理函数
my$("btn").onclick= function() {
   
  //	判断当前点击的按钮的Value值
  if (this.value=="隐藏"){
   
    my$(:dv).style.display="none"; //隐藏
    this.values="显示"
  }else if(this.value=="显示") {
   
    may$("dv").style.display="block"; // 隐藏
    this.value="隐藏"
  }
}

在JS代码中DOM操作的时候，设置元素的类样式，不用class关键字，应该使用，classname

网页的开关灯

input type="button" value="关灯" id="btn"
my$("btn").onclick=function () {
   
  //获取body标签
  document.body.classname= document.body.classname!="cls"?"cls":"";
}

复习总结

DOM树：把html页面或者xml文件看成一个文档，文档就是一个对象，这个文档中所有的标签都是元素，元素也可是看成是对象，标签（元素，对象）有很多，还有嵌套的关系，组成的这中层次结构，可以模拟成树形结构图，简称：树状图，就是DOM树

获取元素

2种方式：

根据id从整个文档中获取元素—返回的是一个元素对象

Document.getelementbyid(“id属性的值”)

根据标签的名字获取元素—返回的元素对象组成的伪数组

document.getielementbytagname(“标签的名字”)

操作基本标签的属性

Src,title,alt,href,id属性

操作表单标签的属性

Name,value,type，checked,selected,disabled,readonly

元素样式的操作

对象.style.属性=值；

对象.className=值；

为元素添加事件的操作

事件：就是一件事，有事件源，触发和响应

this关键字—如果是在当前的元素的时间中使用this，那么this就是当前的对象

内置对象：系统自带的对象

自定义对象：自己写的独享

浏览器对象：

DOM

DOM对象：通过DOM方式获取的元素得到的对象

元素：element:页面中的标签

节点;Node:页面中所有的内容，标签，属性，文本

根元素：html标签

页面中的顶级对象——document

第二部分

案例–重点

元素的样式的操作的案例

阻止超链接跳转、大小图的切换、美图相册、元素样式操作的相关案例：查缺补漏：操作基本标签和表单标签的小案例

innertext和textcontent

innertext和innerhtml的区别

兼容代码

自定义属性

节点操作

点击按钮禁用文本框

input type="button" value="禁用文本框" id="btn"
input type="text" value="文本框" id="txt"
//	先根据id获取按钮，为按钮注册点击事件，添加事件处理函数
document.getelementbyid("btn").onclick=function() {
   
  // 根据id获取文本框，设置disabled属性
  document.getelementbyid("txt").disabled=true;
};

阻止超链接跳转

//	阻止超链接的默认的跳转:return false
a herf="../../" id="ak"百度
document.getelementbyid("ak").onclick=function() {
   
  alert:"aaa"
  return false;
} 

美女相册

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body {
   
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
   
      color: #333;
      background-color: transparent;
    }

    a {
   
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
   
      padding: 0;
    }

    li {
   
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery {
   

      list-style: none;
    }

    #imagegallery li {
   
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }

    #imagegallery li a img {
   
      border: 0;
    }
  </style>
</head>
<body>

<h2>
  美女画廊
</h2>

<ul id="imagegallery">
  <li><a href="images/1.jpg" title="美女A">
    <img src="images/1-small.jpg" width="100" alt="美女1"/>
  </a></li>
  <li><a href="images/2.jpg" title="美女B">
    <img src="images/2-small.jpg" width="100" alt="美女2"/>
  </a></li>
  <li><a href="images/3.jpg" title="美女C">
    <img src="images/3-small.jpg" width="100" alt="美女3"/>
  </a></li>
  <li><a href="images/4.jpg" title="美女D">
    <img src="images/4-small.jpg" width="100" alt="美女4"/>
  </a></li>
</ul>


<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>
  //点击a标签,把a标签中的href的属性值给id为image的src属性
  //把a的title属性的值给id为des的p标签赋值

  //从ul中标签获取获取所有的a标签
  var aObjs=my$("imagegallery").getElementsByTagName("a");
  //循环遍历所有的a标签
  for(var i=0;i<aObjs.length;i++){
   
    //为每个a标签注册点击事件
    aObjs[i].onclick=function () {
   
      //为id为image的标签的src赋值
      my$("image").src=this.href;
      //为p标签赋值
      my$("des").innerText=this.title;
      //阻止超链接默认的跳转
      return false;
    };
  }
</script>
</body>
</html>

隔行变色

<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
  <li>红旗</li>
  <li>五菱宏光</li>
  <li>奔驰</li>
  <li>兰博基尼</li>
  <li>哈弗</li>
  <li>奥拓</li>
  <li>奥迪</li>
  <li>悍马</li>
</ul>


<script src="common.js"></script>
<script>

  //奇红偶黄
  //点击按钮
  //  my$("btn").οnclick=function () {
   
  //      //获取所有的li标签
  //    var list=my$("uu").getElementsByTagName("li");
  //    for(var i=0;i<list.length;i++){
   
  //      if(i%2==0){
   
  //        //偶数
  //        list[i].style.backgroundColor="red";
  //      }else{
   
  //        //奇数
  //        list[i].style.backgroundColor="yellow";
  //      }
  //    }
  //  };


  my$("btn").onclick = function () {
   
    //获取所有的li标签
    var list = my$("uu").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
   
      list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
    }
  };

高亮显示

<ul>
  <li>金士百</li>
  <li>雪花</li>
  <li>百威</li>
  <li>燕京</li>
  <li>青岛</li>
  <li>崂山</li>
  <li>珠江</li>
  <li>华丹</li>
</ul>
<script src="common.js"></script>
<script>
  //鼠标进入和鼠标离开两个事件
  //获取所有的li标签
  var list = document.getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
   
    //为li注册鼠标进入事件
    list[i].onmouseover = function () {
   
      this.style.backgroundColor = "yellow";
    };
    //为li注册鼠标离开事件
    list[i].onmouseout = function () {
   
      //恢复到这个标签默认的颜色
      this.style.backgroundColor = "";
    };

  }

二维码的显示和隐藏

<style>
    .nodeSmall {
   
      width: 50px;
      height: 50px;
      background: url(images/bgs.png) no-repeat -159px -51px;
      position: fixed;
      right: 10px;
      top: 40%;
    }
    .erweima {
   
      position: absolute;
      top: 0;
      left: -150px;
    }
    .nodeSmall a {
   
      display: block;
      width: 50px;
      height: 50px;
    }
    .hide {
   
      display: none;
    }

    .show {
   
      display: block;
    }
  </style>


</head>
<body>
<div class="nodeSmall" id="node_small">
  <a href="#"></a><!--锚定-->
  <div class="erweima hide" id="er">
    <img src="images/456.png" alt=""/>
  </div>
</div>
<script src="common.js"></script>
<script>
  //获取鼠标要进入的a标签

  //先获取最外面的div
  var aObj=my$("node_small").getElementsByTagName("a")[0];
  //为a注册鼠标进入
  aObj.onmouseover=function () {
   
    my$("er").className="erweima show";
  };
  //为a注册鼠标离开
  aObj.onmouseout=function () {
   
    my$("er").className="erweima hide";
  };
</script>

单独获取name

<body>
<input type="button" value="显示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>

<script src="common.js"></script>
<script>

  //点击按钮,改变所有name属性值为name1的文本框中的value属性值

  my$("btn").onclick=function () {
   
    //通过name属性值获取元素-------表单的标签
    var inputs=document.getElementsByName("name1");
    for(var i=0;i<inputs.length;i++){
   
      inputs[i].value="我很好";
    }
  };
</script>

根据类标签获取元素

div {
   
      width: 200px;
      height: 50px;
      background-color: green;
      margin-top: 10px;
    }

    .cls {
   
      background-color: yellow;
    }
  </style>
</head>
<body>
<p>这是一个p</p>
<p class="cls">这是另一个p</p>
<span class="cls">这是第一个span</span><br/>
<span>这是第二个span</span><br/>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<input type="button" value="显示效果" id="btn"/><br/>
<script src="common.js"></script>
<script>

  //点击按钮设置应用cls类样式的标签的背景颜色为红色
  //getElementsByClassName();------>h5的

  my$("btn").onclick = function () {
   
    //根据类样式的名字来获取元素
    var objs = document.getElementsByClassName("cls");
    for (var i = 0; i < objs.length; i++) {
   
      //设置每个元素的背景颜色
      objs[i].style.backgroundColor = "red";
    }
  };
</script>
</body>

总结获取元素的方式

根据id属性的值获取元素,返回来的是一个元素对象

* document.getElementById(“id属性的值”);

* 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

* document.getElementsByTagName(“标签名字”);

* 下面的几个,有的浏览器不支持

* 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

* document.getElementsByName(“name属性的值”)

* 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

* document.getElementsByClassName(“类样式的名字”)

* 根据选择器获取元素,返回来的是一个元素对象

* document.querySelector(“选择器的名字”);

* 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

* document.querySelectorAll(“选择器的名字”)

DIV高亮显示

<style>
    *{
   
      margin: 0;
      padding: 0;
    }
    div{
   
      width: 200px;
      height: 150px;
      background-color: green;
      float: left;
      margin-left: 10px;
      border: 2px solid green;
    }
  </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="common.js"></script>
<script>
  //获取所有的
  //div
  var dvObjs=document.getElementsByTagName("div");
  for(var i=0;i<dvObjs.length;i++){
   
    //为每个div添加鼠标进入的事件
    dvObjs[i].onmouseover=function () {
   
      this.style.border="2px solid red";
    };
    //为每个div添加鼠标离开的事件
    dvObjs[i].onmouseout=function () {
   
      this.style.border="";
    };
  }
</script>
</body>

案例模拟搜索框

<style>
    input {
   
      color: gray;
    }
  </style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="common.js"></script>
<script>

  //获取文本框

  //注册获取焦点的事件
  my$("txt").onfocus = function () {
   
    //判断文本框的内容是不是默认的内容
    if (this.value == "请输入搜索内容") {
   
      this.value = "";//清空文本框
      this.style.color = "black";
    }
  };

  //注册失去焦点的事件
  my$("txt").onblur = function () {
   
//    if (this.value == "") {
   
//      this.value = "请输入搜索内容";
//      this.style.color = "gray";
//    }

    if (this.value.length == 0) {
   
      this.value = "请输入搜索内容";
      this.style.color = "gray";
    }

  };


</script>
</body>

设置获取密码框的长度

<input type="text" value="" id="txt"/>
<script src="common.js"></script>
<script>

  //获取文本框
  my$("txt").onblur=function () {
   
    //判断密码的长度
    if(this.value.length>=6&&this.value.length<=10){
   
      this.style.backgroundColor="red";
    }else{
   
      this.style.backgroundColor="green";
    }
  };
</script>

封装innertext和textcontent

 <style>
    div {
   
      width: 200px;
      height: 150px;
      border: 2px solid red;
    }
  </style>
</head>
<body>

<input type="button" value="设置值" id="btn"/>
<div id="dv">哦,太神奇了</div>

<script src="common.js"></script>
<script>
  //设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
  //设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

  //如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
  //判断这个属性的类型 是不是undefined,就知道浏览器是否支持

  //兼容代码

  //设置任意的标签中间的任意文本内容
  function setInnerText(element,text) {
   
    //判断浏览器是否支持这个属性
    if(typeof element.textContent =="undefined"){
   //不支持
      element.innerText=text;
    }else{
   //支持这个属性
      element.textContent=text;
    }
  }

  //获取任意标签中间的文本内容
  function getInnerText(element) {
   
    if(typeof element.textContent=="undefined"){
   
     return element.innerText;
    }else{
   
      return element.textContent;
    }
  }