1、获取元素

document.getElementById('标签的id值');
document.getElementsByTagName('标签名');
document.getElementsByClassName('标签的类名');
document.getElementsByName('标签的name值');
document.querySelector('选择器'); // 可以传多种 'ul li.active'
document.querySelectorAll('选择器');

2、操作元素

操作非表单元素

id title href src className   innerHTML innerText

表单元素

value checked disable selected   readOnly 

操作自定义标签的属性

用户根据需求,自己给标签添加的自己定义的标签属性

<img src='wc.jpg' bigImg='bigWc.jpg' />
<!--bigImg='bigWc.jpg' 就是用户自定义的标签属性-->

操作方式:

节点对象.getAttribute('属性名')

​ 节点对象.setAttribute('属性值','值')

​ 节点对象.removeAttribute('属性值','值')

注意:自定义标签属性的操作只能够通过元素的getAtrribute、setAttribute、removeAttribute提供的方法操作。 不能直接通过元素点的方式直接获取或设置

3、操作元素样式

3.1、通过元素的style属性操作
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red'; // css→ background-color js→ backgroundColor

通过样式属性设置宽高、位置的属性类型是字符串,需要加上px。**

3.2、通过设置元素的className属性操作
var box = document.getElementById('box');
box.className = 'aa bb';//设置
box.className.replace('aa','AA');//替换

注意:元素的style属性适合操作单个样式,而元素className适合操作一组样式

4、节点之间的关系

元素节点.parentNode
节点.childNodes (包括文本节点和元素节点)
节点.children (仅仅是元素节点)
父节点.firstChild;
// 获取第一个元素子节点对象,有兼容问题IE9以下不支持:
父节点.firstElementChild
父节点.lastChild
// 获取最后一个元素子节点对象,有兼容问题IE9以下不支持
父节点.lastElementChild
节点.previousSibling;
// 获取上一个同级的元素节点,有兼容问题IE9以下不支持
节点.previousElementSibling;
节点.nextSibling;
// 获取下一个同级的元素节点,有兼容问题IE9以下不支持
节点.nextElementSibling;

5、动态创建、追加、删除元素

document.write('<h2>我是标题</h2>');
ul.innerHTML = ul.innerHTML + '<li><a href="#">我是新的li</a></li>';
var a = document.createElement('a');
父节点.appendChild(新的子节点);
父节点.insertBefore(新的节点,旧的子节点)
父节点.removeChild(子节点)
父节点.replaceChild(新的节点,旧的子节点)

6、事件

事件源.事件类型 = 事件处理程序

/*
功能:给元素注册事件
参数:
事件类型 字符串 注意:事件名不加on 如 'click'
事件处理程序 函数
是否捕获:可选,默认为false
*/
事件目标.addEventListener(事件类型,事件处理程序,是否捕获);
/*
功能:移除元素的指定事件程序
参数:
事件类型 字符串 注意:事件名不加on 如:'click'
事件处理程序:函数 注意:这里要把函数名传入过来
*/
事件目标.removeEventListener(事件类型,事件处理程序名称);

7、事件对象的公共属性和方法

事件对象.type -- 获取当前的事件名

事件对象.target -- 获取事件目标里最先触发事件的元素

事件对象.preventDefault() -- 阻止事件默认行为的执行

事件对象.stopPropagation() -- 停止冒泡

8、鼠标事件对象的属性

事件对象.clientX / 事件对象.clientY -- 鼠标在浏览器可视区域中的坐标

事件对象.offsetX / 事件对象.offsetY -- 获取鼠标在指定的元素的区域中的坐标

事件对象.pageX / 事件对象.pageY -- 获取鼠标在整个文档区域中的坐标

9、键盘事件对象的属性

事件对象.altKey -- 检测是否按下键盘上的 Alt键。 按下返回 true

事件对象.ctrlKey -- 检测是否按下键盘上的 Ctrl键。 按下返回 true

事件对象.shiftKey -- 检测是否按下键盘上的 Shift键。 按下返回 true

事件对象.keyCode -- 返回被敲击的键生成的 Unicode 字符码(ascii码),返回ascii码表对应的十进制的数字

10、事件委托

原理就是目标元素和事件冒泡,把事件注册到父元素或父级以上的元素上,等待子元素事件冒泡,并且在父元素或父级以上的元素注册的事件中能够 通过事件对象.target判断是哪个子元素,从而做相应处理。 ​

① 给目标元素的父元素或父级以上的元素注册事件

② 在父元素或父级以上元素注册的事件中通过 事件对象.target判断是哪个子元素

③ 根据判断做出处理。

优点:提高程序性能,可以代理新动态添加的元素的事件。

// 获取div元素
var divNode = document.getElementById('box');
divNode.onclick = function(e){
// 获取最先触发的元素节点
var node = e.target;
// 节点对象.tagName 获取节点对象对应的标签名 返回的是大写
if(node.tagName.toLowerCase()=='p'){
alert(node.innerHTML);
}
}

JavaScript 之 web API的更多相关文章

  1. DOM,javascript,Web API之间的关系——onclick 引起的思考与调研

    平时习惯了用js操作dom树来与html页面进行交互,基本都是通过web API接口实现的,最近看闭包和原生js的知识点比较多,昨天无意中看到了onclick中的this指向问题,遂用native j ...

  2. [ASP.NET MVC 小牛之路]18 - Web API

    Web API 是ASP.NET平台新加的一个特性,它可以简单快速地创建Web服务为HTTP客户端提供API.Web API 使用的基础库是和一般的MVC框架一样的,但Web API并不是MVC框架的 ...

  3. 【转载】ASP.NET MVC Web API 学习笔记---第一个Web API程序

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  4. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  5. 创建Web API

    引言 在公司中用到的都是webAPI的应用程序,这个东西之前没有接触过.但是这个并不是什么新鲜的东西,因我们 之前有mvc的基础,所以说学习这个东西还是比较容易的,在开始的时候自己可能突然蒙圈了.因为 ...

  6. ASP.NET MVC Web API 学习笔记---Web API概述及程序示例

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  7. ASP.NET MVC Web API 学习笔记---第一个Web API程序【转】

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html 1. Web API简单说明 近来很多大型的平台都公开了Web API. ...

  8. ASP.NET MVC Web API 学习笔记---第一个Web API程序---近来很多大型的平台都公开了Web API

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  9. JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]

    [第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript ...

随机推荐

  1. Oracle自动备份bat

    很多时候我们需要自动备份数据库这边推荐bat+Windows计划任务实现 方案1 创建以下bat 然后添加到TaskSchedule(路径最好不要包含中文) @echo off @echo ===== ...

  2. gulp和npm等安装

    提前安装了node.js, https://nodejs.org/zh-cn/download/ 跟着提示安装就行,然后执行一下命令cdm看下版本号如下图就说明安装成功了 安装包里面集成了npm,然后 ...

  3. 《ES6标准入门》(阮一峰)--6.正则的扩展

    1.RegExp 构造函数 在 ES5 中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag). var regex = new Re ...

  4. HDU - 3724 Encoded Barcodes (字典树)

    题意:给定n个字符串和m个经过处理得到的字符串,问对于m个字符串中的每个字符串,n个字符串中以该字符串为前缀的个数.分析:1.误差在[0.95x, 1.05x],因此求8个数的平均数,大于平均数为1, ...

  5. js实现连续输入之后发送请求

    输入框是我们经常会用到的功能,想要实现输入就请求的功能 但是在实际开发中,为了减少服务器压力,会在输入之后停留1s没有输入之后再进行搜索 研究之后用原生js及表单写了一个简单的demo,如果有好的de ...

  6. POJ 1655:Balancing Act

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10311   Accepted: 4261 De ...

  7. windows下移植别人配置好的python环境

    一般来说,我们在windows下配置python环境的时候可能会比较推荐用anaconda,那么有一个比较方便的anaconda环境移植方法,也就是说,如果我已经在windows上安装好了anacon ...

  8. 八十六、SAP中ALV的事件查看

    一.事务代码SE37,点击运行 二.再点击执行 三.我们可以看到有17个事件,点击17前面的表格图标 四.来到详细的事件中 五.我们回到SE37,点击显示 六.查看参数,为一个内表 七.我们点击SLI ...

  9. JAVA中的指针

    不同于CPP,JAVA中不需要程序员对指针进行操作.不过,这不代表JAVA没有指针,事实上,JAVA的指针操作都被底层代码封装了.笔者在初学Java时,虽然就了解了形参,实参,StringBuffer ...

  10. C#文本操作

    1.使用FileStream读写文件 文件头: 复制代码代码如下: using System;using System.Collections.Generic;using System.Text;us ...