BOM对象

window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

Window 对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

方法使用

1、alert confirm prompt以及open函数

 //----------alert confirm prompt----------------------------//alert('aaa');/* var result = confirm("您确定要删除吗?");alert(result); *///prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.// var result = prompt("请输入一个数字!","haha");// alert(result);
方法讲解:    //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.//调用方式1//open("http://www.baidu.com");//参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口//close方法  将当前文档窗口关闭.//close();

View Code

示例:

 var num = Math.round(Math.random()*100);function acceptInput(){//2.让用户输入(prompt)    并接受 用户输入结果var userNum = prompt("请输入一个0~100之间的数字!","0");//3.将用户输入的值与 随机数进行比较if(isNaN(+userNum)){//用户输入的无效(重复2,3步骤)alert("请输入有效数字!");acceptInput();}else if(userNum > num){//大了==> 提示用户大了,让用户重新输入(重复2,3步骤)alert("您输入的大了!");acceptInput();}else if(userNum < num){//小了==> 提示用户小了,让用户重新输入(重复2,3步骤)alert("您输入的小了!");acceptInput();}else{//答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).var result = confirm("恭喜您!答对了,是否继续游戏?");if(result){//是 ==> 重复123步骤.num = Math.round(Math.random()*100);acceptInput();}else{//否==> 关闭窗口(close方法).
                    close();}}}

View Code

2、setInterval,clearInterval

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数

语法:<br>     setInterval(code,millisec)其中,code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔,以毫秒计。

示例:

<input id="ID1" type="text" οnclick="begin()">
<button οnclick="end()">停止</button><script>function showTime(){var nowd2=new Date().toLocaleString();var temp=document.getElementById("ID1");temp.value=nowd2;}var ID;function begin(){if (ID==undefined){showTime();ID=setInterval(showTime,1000);}}function end(){clearInterval(ID);ID=undefined;}</script>

View Code

DOM对象

什么是HTML  DOM

  • HTML  Document Object Model(文档对象模型)
  • HTML DOM 定义了访问和操作HTML文档的标准方法
  • HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)

DOM

        

画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。

DOM节点

节点类型

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的:

  • 整个文档是一个文档节点
  • 每个 HTML 标签是一个元素节点
  • 包含在 HTML 元素中的文本是文本节点
  • 每一个 HTML 属性是一个属性节点

其中,document与element节点是重点。

节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分,以及节点之间的关系:

访问 HTML 元素(节点),访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。

节点查找

直接查找节点

document.getElementById('idname')                # id='idname'
document.getElementsByTagName('input')       # 标签为input的标签对象document.getElementsByName('name')            #name='name'
document.getElementsByClassName('name')     #class='name'

<div id="div1"><div class="div2">i am div2</div><div name="yuan">i am div2</div><div id="div3">i am div2</div><p>hello p</p>
</div><script>var div1=document.getElementById("div1");////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)</script>

View Code

注意:设计到寻找元素,注意<script>标签的位置!

导航节点属性

parentElement       // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

注意,js中没有办法找到所有的兄弟标签!

节点操作

创建节点:

createElement(标签名) :创建一个指定名称的元素。

例:var  tag=document.createElement(“input")tag.setAttribute('type','text');

添加节点:

追加一个子节点(作为最后的子节点)
somenode.appendChild(newnode)把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

删除节点:

removeChild():获得要删除的元素,通过父元素调用删除

替换节点:

somenode.replaceChild(newnode, 某个节点);

节点属性操作:

1、获取文本节点的值:innerText    innerHTML

2、attribute操作

elementNode.setAttribute(name,value)    elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)elementNode.removeAttribute(“属性名”);

3、value获取当前选中的value值

input
select (selectedIndex)
textarea  

4、innerHTML 给节点添加html代码:
        该方法不是w3c的标准,但是主流浏览器支持    
        tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作:

elementNode.className      #设置或者查找类名为xxx的节点
#例:查找id为myid的节点,它的类名为什么console.log(document.getElementId('myid').className);
#例:设置这个节点。它的类名document.getElementId('myid').className='zzz';

elementNode.classList.add('xxx')   添加节点的'xxx'类属性
elementNode.classList.remove('xxx')   移除节点的'xxx'类属性

6、改变css样式:

<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontSize=60px;
</script>

转载于:https://www.cnblogs.com/JAYWX/articles/7819725.html

Day 11/09/2017 前端基础之JS(三)相关推荐

  1. web前端基础之JS

    JavaScript概述 一个完整的 JavaScript 实现是由以下 3 个不同部分组成的: 核心(ECMAScript) 文档对象模型(DOM) Document object model (整 ...

  2. 前端基础-Node.js核心模块的使用

    第2章 核心模块的使用 2.1.1 FS模块 node核心模块之一,用于操作文件: 中文手册 : http://nodejs.cn/api/fs.html 文件读写 // 引入模块 var fs = ...

  3. 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

    前言 博主主页

  4. web前端基础之Bootstrap(三) - 插件

    模态框 放在body内的直接子元素 弹出方式  1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...

  5. 前端基础 html(三)

    基础语义化标签-三种列表 1.有序列表:带有标号顺序的列表 2.无序列表:没有顺序,但有表头的列表 3.自定义列表:一个列表中可以同时放图片和文字,称作一行列表. 小技巧可以用ul>li*3的形 ...

  6. 前端基础 - 案例(三) 报时器

    实现一个报时器,例如6:00-12:00显示早上好: 12:00-18:00显示下午好:18:00-6:00显示晚上好 <!DOCTYPE html> <html lang=&quo ...

  7. Web前端基础——jQuery(三)

    本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历 2 jQuery 中的过滤器 3 jQuery 属性操作 4 jQuery Dom节点操作 5 几个jQuery例子 6 ...

  8. 前端基础进阶(七):函数与函数式编程

    纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点.在学习的过程中,可能会有很多人.很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面 ...

  9. 前端基础——CSS布局

    前端基础学习第三天 文章目录 前端基础学习第三天 一.CSS布局 1.margin(外边距) 2.padding(内边距) 3.position 4.float 二.布局实例 1.浮动布局 2.弹性布 ...

最新文章

  1. phpstudy下的mysql升级
  2. PHP 自定义session储存 数据库 方式类   高洛峰 细说PHP
  3. 皮一皮:35岁后你做什么?
  4. 万字超强图文讲解 AQS 以及 ReentrantLock 应用
  5. Codeforces Round #624 (Div. 3) D. Three Integers 数论
  6. 下列不属于html5语义元素,HTML5 新的语义元素
  7. vue中通过js控制页面样式方法
  8. 转录组测序多少生物重复合适?2个?3个?48个?
  9. 20145217 《信息安全系统设计基础》第0周学习总结
  10. java cap是什么_寒冬面试归来总结最新蚂蚁4面(Java):CAP+数据强一致性+分布式等...
  11. 10款非常有效的帮助你设计超酷响应式布局的jQuery插件
  12. 解决开启Vue项目缺少node_models包问题
  13. 同步发电机转子的转动惯量与运动方程(一) 基本物理概念
  14. 利用爬虫刷CSDN博客访问量
  15. python zip压缩_用Python处理ZIP压缩包
  16. Chrome浏览器所有页面崩溃
  17. 计算机用通讯电压多少,通信局(站)用交流电源的质量指标要求
  18. ayit第十周训练g题
  19. 提高pyautogui识图率的优化方案
  20. Python库的安装详解

热门文章

  1. vue中props的用法
  2. RNA 7. SCI 文章中的基因表达——主成分分析 (PCA)
  3. 免费图片在线压缩网站推荐
  4. PIXYZ Studio Workflow
  5. web前端培训哪家好?
  6. 给窗式空调加装遥控器
  7. 《图解深度学习》学习笔记(二)
  8. unity shader立方体纹理中的反射以及折射效果的实现
  9. java生成.exe文件
  10. Python进阶 - 对象,名字以及绑定