VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript教程 >
  • javascript 09 web API DOM

 

API应用程序编程接口,是一些预先定义的函数,或方法。

任何开发语言都有自己的API

API的特征是输入和输出(I/O )

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

DOM经常进行的操作:

获取元素

对元素进行操作(设置属性或方法)

动态创建元素

事件

 

获取网页上的元素,返回一个对象:document.getElementById(),doucemnt.getElementsByTagName(' ')  //id唯一,所以element不是复数,而Tag Name标签名可能很多不唯一,所以是复数

  document.getElementById()  返回一个对象

  doucemnt.getElementsByTagName(' ')  返回一个集合对象(动态集合,无关html执行顺序,都可以获取到),有索引,也可遍历

  定义一个变量接受标签的id属性(一般和id名称一致) var main= doucument.getElementById('id名')  //get 获取,element 元素,by 根据,id 表标示  

  main= doucument.getElementById('id名'),main是一个对象。输出对象用console.dir(),可以输出所有属性和方法

 

获取二级标签:

<div id = "name">

  <div>123</div>

  <div>456</div>

</div>

var name = document.getElementById('name');

var divs = name.getElementsByTagName('div');  //利用返回的name对象的属性,主要:id只能通过document对象来调用

 

其他获取元素的方法:有兼容问题,查文档

  选择器获取:document.querySelector()  id选择器可以获取一 个,类选择器只能获取到第一个

        document.querySelectorAll()  //获取所有

 

 

事件:当什么时候做什么事  触发-响应 。事件都是on开头,是 当……的时候 的意思。例如onclick,当点击的时候。事件名称不是onclick,是click

 <input type="button" id='bun' value='点我'>  //制作一个按钮

bun=document.getElementById('bun');

bun.onclick = function(){alert('don't touch me!')}  //设置事件处理函数

 

获取的元素一般和对应的标签有相同的属性:  //注意,DOM对象的对应标签的class属性名字叫做className,因为class是关键字,关键字不可以作为属性名字 

点击换图片案例:

复制代码
<img src = "xxx" id='sss'>

<input type="button" id='bun' value='点我'>

<script>

  var sss = document.getElementById('sss');
  bun=document.getElementById('bun');

  var flag = 1;  //通过控制flag的数值来实现图片循环切换
  //通过更改属性值来实现点击切换图片

  bun.onclick = function(){

      if(flag===1){
                      sss.src="yyy";
        flag = 2;
            }elseif(flag===2){
               sss.src="xxx";
               flag =1;
                }  

            };  
</script>                
复制代码

 事件处理函数中的this:指向事件源,即调用该事件的对象

js控制css样式:object.style.display = 'none';  //开发的时候css可能是别人写的,在不改变代码的前提下修改css就需要自己再写一个样式,通过class或者id来改变

 

取消<a>的默认行为(跳转):

<a id = "qwe" href="xxxxx">百度</a>
qwe = document.getElementById('qwe');
qwe.onclick = function(){return false;}    //在事件中return false,超链接就不跳转了

 

 

获取标签集合的时候,需要其中每个标签触发事件可以用this。this指向事件源,即标签集合中的各个元素而不是标签的集合整体

复制代码
<div id="kuai">
    <a href="">
        <img src="">
    </a>
    <a href="">
        <img src="">
    </a>
    <a href="">
        <img src="">
    </a>
    <a href="">
        <img src="">
    </a>
</div>
var kuai = document.getElementById('kuai');
//jihes 是a标签的集合
var jihes = kuai.getElementsByTagName('a');
for (var i = 0; i < jihes.length; i++) {
    var jihe = jihes[i];
    jihe.onclick = function(){
        var image = document.getElementById('image');
        image.src = this.src;    //此处只能用this不能用jihe。因为事件是在浏览器执行完代码之后触发的。用jihe.src的话只能找到最后一个遍历值。而this指向事件源,即遍历的元素中触发了事件的对象
        return false;
    } 
}
复制代码

 

来源:https://www.cnblogs.com/xiaoyuheng/p/14851191.html



相关教程