第四章、前端之BOM和DOM

一、解释BOM和DOM

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

二、window对象

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.open() - 打开新窗口

window.close() - 关闭当前窗口

三、window子对象

navigator对象

sreen对象

history对象

location对象

四、弹出框

警告框：alert()

确认框: confirm() 返回true和false

提示框 ：prompt() 返回输入的值

五、计时相关

setTimeout("js代码",毫秒) 返回某个值 过了一段时间执行

clearTimesetT(setTimeout返回的值) 

setInterval("js代码",毫秒) 每隔一段时间执行js语句，返回的是ID值，该值可用作 clearInterval() 方法的参数。

clearInterval(setinterval返回的ID值) 方法可取消由 setInterval() 设置的 timeout。

ps:以上内容是DOM，以下内容是BOM

六、HTML的DOM树

说明：DOM标准规定HTML文档中的每个成分都是一个节点(node)：

  • 文档节点(document对象)：代表整个文档
  • 元素节点(element 对象)：代表一个元素（标签）
  • 文本节点(text对象)：代表元素（标签）中的文本
  • 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
  • 注释是注释节点(comment对象)　

说明：JavaScript 可以通过DOM创建动态的 HTML：

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

七、查找元素

直接查找：

document.getElementById 根据ID获取一个标签

document.getElementsByClassName 根据class属性获取

document.getElementsByTagName 根据标签名获取标签合集

间接查找：

parentElement 父节点标签元素

children 所有子标签

firstElementChild 第一个子标签元素

lastElementChild 最后一个子标签元素

nextElementSibling 下一个兄弟标签元素

previousElementSibling 上一个兄弟标签元素

八、节点操作

创建节点

createElement(标签名)


1.html

<!--创建一个新的<div>并且插入到ID为“div1”的元素前。-->

<!DOCTYPE html>

<html>

<head>

  <title>||Working with elements||</title>

</head>

<body>

  <div id="div1">The text above has been created dynamically.</div>

</body>

</html>


在控制台上输入

document.body.onload = addElement;

function addElement () {

  // create a new div element

  // and give it some content

  var newDiv = document.createElement("div");

  var newContent = document.createTextNode("Hi there and greetings!");

  newDiv.appendChild(newContent); //add the text node to the newly created div. 

  // add the newly created element and its content into the DOM

  var currentDiv = document.getElementById("div1");

  document.body.insertBefore(newDiv, currentDiv);

}

addElement()

结果如下

html文本

<html><head>

  <title>||Working with elements||</title>

</head>

<body>

  <div>Hi there and greetings!</div>

  <div>Hi there and greetings!</div><div id="div1">The text above has been created dynamically.</div>

</body></html>

显示效果：

Hi there and greetings!

The text above has been created dynamically.


添加节点

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

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

-------------------------------------------

实例：

document.getElementById("myList").insertBefore(newItem,existingItem);


替换节点：

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


属性节点

获取文本节点的值：

var divEle = document.getElementById("d1")

divEle.innerText

divEle.innerHTML


设置文本节点的值：

var divEle = document.getElementById("d1")

divEle.innerText="1"

divEle.innerHTML="<p>2</p>"


attribute操作

var divEle = document.getElementById("d1");

divEle.setAttribute("age","18")

divEle.getAttribute("age")

divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置

imgEle.src

imgEle.src="..."


获取值操作

节点对象.value

适用于以下标签：

.input

.select

.textarea

------------------------------

var iEle = document.getElementById("i1");

console.log(iEle.value);

var sEle = document.getElementById("s1");

console.log(sEle.value);

var tEle = document.getElementById("t1");

console.log(tEle.value);


class的操作

className 获取所有样式类名(字符串)

classList.remove(cls) 删除指定类 classList.add(cls) 添加类

classList.contains(cls) 存在返回true，否则返回false

classList.toggle(cls) 存在就删除，否则添加


指定CSS操作

obj.style.backgroundColor="red"

九、JS操作CSS属性的规律

  1. 对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

    obj.style.margin

    obj.style.width

    obj.style.left

    obj.style.position

  2. 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

    obj.style.marginTop

    obj.style.borderLeftWidth

    obj.style.zIndex

    obj.style.fontFamily

十、事件

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 // 练习：输入框

onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress 某个键盘按键被按下并松开。

onkeyup 某个键盘按键被松开。

onload 一张页面或一幅图像完成加载。

onmousedown 鼠标按钮被按下。

onmousemove 鼠标被移动。

onmouseout 鼠标从某元素移开。

  1. 绑定方式

    方式一:定义标签的时候就指定好函数了

    <div id="d1" onclick="changeColor(this);">点我</div>
    
<script>
    
function changeColor(this) {
    
　　 ths.style.backgroundColor="green";
    
}
    
</script>

    注意：

    this是实参，表示触发事件的当前元素。

    函数定义过程中的ths为形参。

    方式二：定义标签后 再用对象.属性的方式指定函数

    <div id="d2">点我</div>
    
<script>
    
　　 var divEle2 = document.getElementById("d2");
    
　　 divEle2.onclick=function () {
    
　　　　 this.innerText="呵呵";
    
　　　}
    
</script>

十、案例

计时器：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<input type="text" id="i1">

<button id="b1">开始</button>

<button id="b2">结束</button>

<script>

    var t;

    function showTime() {

        var i1Ele = document.getElementById('i1');

        var time = new Date();

        i1Ele.value = time.toLocaleString();

    }

    showTime();

    var b1Ele = document.getElementById('b1');

    b1Ele.onclick = function (ev) {

        if (!t){

            t = setInterval(showTime,1000)

        }

    };

    var b2Ele = document.getElementById('b2');

    b2Ele.onclick = function (ev) {

       clearInterval(t);

       t = undefined

    };

</script>

</body>

</html>

涉及到的知识点：计时相关的函数、onclick触发事件、查找元素、Date对象的使用、input标签

搜索框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>搜索框示例</title>

</head>

<body>

    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">

<script>

function focus(){

    var inputEle=document.getElementById("d1");

    if (inputEle.value==="请输入关键字"){

        inputEle.value="";

    }

}

function blur(){

    var inputEle=document.getElementById("d1");

    var val=inputEle.value;

    if(!val.trim()){

        inputEle.value="请输入关键字";

    }

}

</script>

</body>

</html>

涉及到的知识点：获取属性值方法、查找元素、onfocus、onblur属性

第四章、前端之BOM和DOM的更多相关文章

  1. 前端(4)BOM与DOM

    前端(4)BOM与DOM I/O前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交 ...

  2. 04 前端之BOM与DOM

    目录 前端之BOM与DOM BOM与DOM操作 BOM操作 前端之BOM与DOM BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>& ...

  3. 前端之BOM和DOM

    BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”. DOM(Document Object Model)是指 ...

  4. 前端基础-BOM和DOM的介绍

    阅读目录 BOM和DOM的简述 DOM详细操作 事件 一.BOM和DOM的简述 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我 ...

  5. 前端基础BOM和DOM

    前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  6. 前端基础-BOM和DOM学习

    JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...

  7. 前端之BOM，DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  8. 前端 --- 5 BOM 和 DOM

    一.BOM BOM(Browser Object Model)是指浏览器对象模型, 它使 JavaScript 有能力与浏览器进行“对话”. 1. window 对象 一些常用的Window方法: ( ...

  9. 前端开发—BOM对象DOM文档对象操作

    BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...

随机推荐

  1. linux简单命令5---开机与重启

    时间可以写为:now.shutdown命令是安全的命令(保存运行程序) 2:下面为其他不安全的关机命令 必须正确退出登录,window是注销

  2. iOS优秀第三方框架

    1.数据库操作:BGDB_OC 2.腾讯崩溃检测: Bugly 3.强大易用的bug收集管理工具: Bugtags 4.访问本地相册,选择多张图片: HMImagePicker 5.iOS颜色库: W ...

  3. asp.net mvc 中Html.ValidationSummary显示html

    @if (!ViewData.ModelState.IsValid) { <div>@Html.Raw(HttpUtility.HtmlDecode(Html.ValidationSumm ...

  4. scalaTest的初步使用

    1. 概述 ScalaTest是scala生态系统中最流行和灵活的测试工具,可以测试scala.js.java代码. 2. ScalaTest的特性 a. ScalaTest的核心是套件(suite) ...

  5. 十步学习法 -- 来自<<软技能>>一书的学习方法论

    <<软技能>>第三篇“学习”,作者讲述了自己的学习方法:十步学习法.下面我用编程语言的方式来介绍. 十步学习法 伪代码介绍 # **这一步的目的不是要掌握整个主题,而是对相关内 ...

  6. Windows 10 下如何彻底关闭 Hyper-V 服务

    以管理员身份运行命令提示符 执行命令 bcdedit /set hypervisorlaunchtype off 重启,运行vm即可. 如果想要恢复hyper启动 bcdedit / set hype ...

  7. SpringBoot异步编程

    异步调用:当我们执行一个方法时,假如这个方法中有多个耗时的任务需要同时去做,而且又不着急等待这个结果时可以让客户端立即返回然后,后台慢慢去计算任务.当然你也可以选择等这些任务都执行完了,再返回给客户端 ...

  8. mysql 全表扫描场景

    全表扫描是数据库搜寻表的每一条记录的过程,直到所有符合给定条件的记录返回为止.通常在数据库中,对无索引的表进行查询一般称为全表扫描:然而有时候我们即便添加了索引,但当我们的SQL语句写的不合理的时候也 ...

  9. 2019华东交通大学ACM基地简介

    一.基地成就简介: ACM国际大学生程序设计竞赛(英文全称:ACM International Collegiate Programming Contest(简称ACM-ICPC或ICPC))是由国际 ...

  10. class.forName 和 classLoader的区别

    Java中的Class.forName()和ClassLoader都可以用来对类进行加载.Class.forName()除了将类的.class文件加载到JVM中 还会对类进行解释,执行类中的stati ...