第四章、前端之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. SSD总结

    SSD: Single Shot MultiBox Detector 1. Introduction 改进点: 以前的方法都是先搞bounding box,再对box里面做分类.特点:精度高,速度慢. ...

  2. Core Data概述（转）

    Core Data是一个模型层的技术.Core Data帮助你建立代表程序状态的模型层.Core Data也是一种持久化技术,它能将模型对象的状态持久化到磁盘,但它最重要的特点是:Core Data不 ...

  3. 容器时代的持续交付工具---Drone：Drone使用

    上一篇文章里已经介绍了如何安装Drone,下面我们来看下如何使用.还是基于gogs作为git仓储. 首先打开server对应的地址,进入登录页面,输入在启动server时配置的管理员账号(对应的就是g ...

  4. Java.lang 包 util 包等各个包详解

    java.lang 该包提供了 Java 编程的基础类,例如 Object.Math.String.StringBuffer.System.Thread 等,不使用该包就很难编写 Java 代码了. ...

  5. POJ 3229：The Best Travel Design

    Description Dou Nai ), and the end of the travel route hours on traveling every day. Input There are ...

  6. 1.4Zookeeper和Thymeleaf的使用

    什么是Zookeeper? Zookeeper 是一个开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务.配置维护和命名服务等等.采用下图描述zookeep ...

  7. 洛谷P4779 【模板】单源最短路径

    P4779 [模板]单源最短路径(标准版) 题目链接 https://www.luogu.org/problemnew/show/P4779 题目描述 给定一个 N个点,M条有向边的带非负权图,请你计 ...

  8. Pangu and Stones(HihoCoder-1636)(17北京OL)【区间DP】

    题意:有n堆石头,盘古每次可以选择连续的x堆合并,所需时间为x堆石头的数量之和,x∈[l,r],现在要求,能否将石头合并成一堆,如果能,最短时间是多少. 思路:(参考了ACM算法日常)DP[i][j] ...

  9. Go语言学习之main包的讲解

    ### Go语言学习之main包的讲解 1.Go中main函数不支持任何返回值 2.可以通过os.Exit(0)来返回状态 func main(){ fmt.Println("hellow ...

  10. 内存溢出,内存泄漏,CPU溢出区别

    内存溢出 out of memory,就是你要的内存空间超过了系统实际分配给你的空间,此时系统相当于没法满足你的需求,就会报内存溢出的错误 内存泄漏是指你向系统申请分配内存进行使用(new),可是使用 ...