WebApi编程（一）-DOM

1.js组成
基本语法掌握后，我们要学习DOM和BOM,页面交互功能
API: 就是一个接口，一些预定义的函数。
2.DOM（文档对象模型）
文档：一个页面就是一个文档，document
元素：网页中的标签都是元素，element
节点：网页中的内容就是节点，node
①获取网页元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id='xiaodi'>小邸</div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul id="nav"><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li></ul><div class="hezi">盒子1</div><div class="hezi">盒子2</div><!--此处的js需要写在下面，因为页面加载从上往下--><script>// 1.通过Id获取var byid = document.getElementById('xiaodi');console.dir(byid);// 2.通过标签获取// byelement是存放所有标签的数组，获取直接遍历var byelement = document.getElementsByTagName('li');// 这样操作会获得所有的li标签，我只想获取上边的怎么办呢// 可以先通过id来获取var nav = document.getElementById('nav');var nav_li = nav.getElementsByTagName('li');console.log(nav_li[0]);// 3.html5新增，支持ie9以上的类名获取var byclass = document.getElementsByClassName('hezi');console.log(byclass);// 4.querySelector返回第一个元素,任何选择器var first = querySelector('.hezi');var first1 = querySelector('#id');// 或者使用querySelectorAll()全部获取// 特殊元素html和bodyvar bodyele = document.body;var htmlele = document.documentElement;</script>
</body>
</html>

②事件基础
出发响应机制，分为三个部分，分别为事件源，事件类型，事件处理程序。
事件源就是谁触发事件，类型就是什么样的事件，处理程序就是干什么。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">点击弹出对话框</button><div id="nav">你中奖了！</div><script>// 获取事件源var btn = document.getElementById('btn');// 触发事件包括点击，鼠标经过，键盘，滚轮等等btn.onclick = function() {alert('出来了');}var nav = document.getElementById('nav');nav.onclick = function() {alert('中了');}</script>
</body>
</html>

③操作元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">点击</button><div id="box">点击按钮出时间</div><p>不点也能获取</p><div id="box1"></div><script>// 1.改变元素内容innerText,不识别html标签var btn = document.querySelector('#btn');btn.onclick = function() {var box = document.querySelector('#box');// 改变内容box.innerText = getTime();}// 不要点击刷新直接得到时间var p = document.querySelector('p');p.innerText = getTime();function getTime() {var date1 = new Date();var date2 = date1.getFullYear() + '年' + (date1.getMonth() + 1) + '月' + date1.getDate() + '日' + date1.getHours() + '时' + date1.getMinutes() + '分' + date1.getSeconds() + '秒' + ' 星期' + date1.getDay();return date2;}// 2.innerHtml识别html标签var box1 = document.querySelector('#box1');// box1.innerText = '<strong>加粗文字</strong>'; // 不好使，不识别box1.innerHTML = '<strong>加粗文字</strong>';// 两种操作元素的方法都可以获得元素内容和修改元素// </script>
</body>
</html>

④改变元素属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="xi">喜羊羊</button><button id="lan">懒洋洋</button><div><img src="C:\java-script_learning\image\xi.jpg" title="喜羊羊"></div><button id="btn">获取</button><input type="text" value="输入内容"><script>// 切换图片var xi = document.querySelector('#xi');var lan = document.querySelector('#lan');var image = document.querySelector('img');lan.onclick = function() {image.src = 'C:\\java-script_learning\\image\\lan.jpg';image.title = '懒洋洋';        }xi.onclick = function() {image.src = 'C:\\java-script_learning\\image\\xi.jpg';image.title = '懒洋洋';}// 改变文本框内容var btn = document.querySelector('#btn');var input = document.querySelector('input');btn.onclick = function() {input.value = '别输入';btn.disabled = true;}</script>
</body>
</html>

简单得密码隐藏和显示例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: 0;}.box img {width: 20px;height: 20px;top: 25px;right: 2px;position: absolute;}</style>
</head>
<body><div class="box">用户名<input type="text" id="name"><br></div><div class="box"><label for=""><img src="C:\java-script_learning\image\yanj1.jpg" alt=""></label>密码<input type="password" id="pass"></div><script>var pass = document.querySelector('#pass');var btn = document.querySelector('button');var image = document.querySelector('img');flag = 0;image.onclick = function() {if(flag == 0) {pass.type = 'text';image.src = 'C:\\java-script_learning\\image\\yanj2.jpg';flag = 1;}else {pass.type = 'password';image.src = 'C:\\java-script_learning\\image\\yanj1.jpg';flag = 0;}}</script>
</body>
</html>

⑤操作元素样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div></div><script>// 点击盒子变颜色，操作样式var box = document.querySelector('div');box.onclick = function() {box.style.backgroundColor = '#ccc';}</script>
</body>
</html>

或者

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.change {background-color: aqua;color: brown;font-size: large;}</style>
</head>
<body><div>哈哈</div><script>var box = document.querySelector('div');box.onclick = function() {// 增加类名给样式this.className = 'change';}</script>
</body>
</html>

文本消失复原案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" value="手机"><script>var te = document.querySelector('input');// onfocus获取焦点te.onfocus = function() {if(te.value === '手机') {te.value = '';}else {te.value = te.value;}}// onblur失去焦点te.onblur = function() {if(te.value === '') {te.value = '手机';}}</script>
</body>
</html>

总结

WebApi编程（一）-DOM相关推荐

Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
WebAPI编程_DOM
DOM介绍什么是DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容.DO ...
JavaScript提高，BOM编程，DOM编程
第1章 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 BOM:Browser Object Model 浏览器对象模型 1.1.2 BOM编程的作用用于操作浏览器中的各种对象,不 ...
前端学习第三阶段-第3章 WebAPI编程
3-1 API 和 Web API 01-Web APIs简介导读 02-js基础和Web APIs两个阶段的关联性 03-API 和 Web API 3-2 DOM介绍 04-DOM导读 05-DO ...
【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/
新增动画前进后退效果案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...
html5 本地文件系统,本地文件系统客户端存储 WebAPI编程 [HTML5知典]
本地文件系统首先要声明的是,这里的本地文件系统并不是客户端操作系统下的本地磁盘文件系统,而是Web应用程序在客户端创建和管理的一个与页面相关联的沙盒文件系统. 概述本地文件系统(Local Fil ...
JavaScript中BOM和DOM(持续更新)
文章目录 1.API和WebAPIs 1.1 Web APIs和JS基础关联性 1.2 API和Web API 1.3 API和WebAPI总结 2.DOM 2.1 DOM简介 2.1.1 什么是DO ...
XML DOM – 属性和方法概述
属性和方法向 XML DOM 定义了编程接口. 编程接口 DOM 把 XML 模拟为一系列节点对象.可通过 JavaScript 或其他编程语言来访问节点.在本教程中,我们使用 JavaScript. ...
【转】web 前端研发工程师编程能力飞升之路
[前言] 所谓的天才,只不过是比平常人更快的掌握技能.完成工作罢了:只要你找到了正确的方向,并辅以足够的时间,你一样能够踏上成功彼岸. 本文将 web 前端研发编程能力划分了 8 个等级,每个等级都列 ...

WebApi编程（一）-DOM

WebApi编程（一）-DOM相关推荐

最新文章

热门文章