js操作bom和dom

Bom

  概念

    BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM则无疑才是真正的核心。

    BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。

window对象

  窗口高度

   var  a  = window.innerheight

  窗口宽度

  var a = window。innerwidth

  打开一个新的页面

  open (https://www.baidu.com/)

  关闭一个页面

  在当前页面输入    close()  即可关闭

location对象

  获取url

  location.href   (注意不需要加())

  转到其他页面

  location.href = "url"   其中url 是你要打开的页面

  重新加载

  location.reload()

弹出框

  alret(“文本”)        警告框 只有确定

  confirm("文本")   当你点击确定时返回true  当你点击取消时返回 false

  prompt("提示语1","提示语2")     会弹出一个带有input的框,当你再input框中输入文本时,会被拿到

计时器(重点)

  计时器分为两种

  第一种时隔多少秒做什么事情(只会执行一次),格式  var a = setTimeout(函数(js语句), 毫秒),其中必须时函数,1000毫秒等于一秒。一般来说都会定义一个变量来接受这个计时器,方便清除。


// setTimeout设置
var timer = setTimeout(function(){alert(123);}, 3000)

    

// 取消setTimeout设置
clearTimeout(timer);

    第二种是每隔多少秒进行一次(可以执行多次),格式类似setTimeout ,其中clearInterval(timer)返回的数值是计时器在cpu的地址

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

 Dom

    概念:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

    dom树结构:

    

    查找对象

      直接查找有三种,主要是通过id,class,和标签名字来获取,其中id获取到的是一个,其余两个获取的是数组。要拿到具体的值可以通过[“索引”]来取值。   

document.getElementById("文本文档中的id")
document.getElementsByClassName("文本文档中的属性名")
document.getElementByTagName("文本文档中的标签名字")

      间接查找(通过直接查找找到一个具体的标签,然后再通过间接查找找到想要的标签)儿子标签会将所有的儿子标签拿到,并返回一个数组,父亲标签同理。

var a = document.getElementById("d1")
var a1 = a.parentElemen // 父级标签
var a2 =a.children//儿子标签
var a3 = a.lastElementChild//最后一个儿子标签
var a4 = a.firstElementChild//第一个儿子标签
var a5 = a.nextElementSibling//下一个兄弟标签
var a6 = a.previousElementSibling//上一个兄弟标签

     创建节点

  其中括号里面的填写是各个标签的类型,可以通过.class的属性名进行属性设置。

var a = document.createElement("a");

    添加节点

            给父级标签添加一个儿子标签  格式 父级标签 . appendChild(新建的标签)

var a1 = document.getElementById("d1");
a1.appendChild(a);

     插入节点

      在a1的儿子标签中,插入一个a标签,位置再a2的前面  格式:父级标签.insertBefore(新建的标签,在谁的前面,两个必须都是儿子标签)

a1.insertBefore(a,a2)

     删除节点

       删除父级标签下的某一个标签 格式:父级标签 . removeChild(要删除的标签)

a1.removeChild(a)

        替换节点

       替换父级标签下的一个标签  格式: 父级标签 . replaceChild (新的标签,要替换的标签)

a1.replaceChild(a,a2)

        文本操作

        主要分innerHTML和innerText。两个格式都是  标签 .  innerText(innerHTML) = "要设置的文字"

        两者的区别在于前者可以识别自己手写的标签内容,而后者只能写纯文本。同时都是将原先的内容替换掉

a.innerText = "<div>你好啊</div>"      //<div>你好啊</div>a.innerHTML ="<div>你好啊</div>"   // 你好啊

    attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置,如果是你自定义的属性,是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."

    value操作 

      主要是用于拿到标签的值 适用于1.input   2.select  3.textarea

var a_text   =  a.value

     Class操作

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

首先获取标签对象

标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true,否则返回false
classList.toggle(cls)  存在就删除,否则添加,toggle的意思是切换,有了就给你删除,如果没有就给你加一个

    css操作

      JS操作CSS属性的规律:

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

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

   事件

      

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

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。

        绑定方式有两种:

          第一种:不常用 函数中的ths是一个形参,可以随便写      

<div id = "i1" onclick="f1(this)">
    测试
</div>
<script>
    function f1(ths) {
        ths.style.backgroundColor = "red"//点击之后背景色变成红色

    }

          第二种:实现了css 与js的分离  比较常用

<div id = "i2">
    测试
</div>
<script>
var d2 = document.getElementById("i2")
    d2.onclick =function () {
        this.style.backgroundColor = "red"
    }
</script>

原文地址:https://www.cnblogs.com/tianhognwei/p/10560838.html

时间: 2024-11-05 02:22:31

js操作bom和dom的相关文章

js基础和js操作bom和dom对象

流程控制 if判断 if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容 console.log('1111'); } else{ console.log('222'); } 多条件判断 var a = 0; if(a > 1){ // console.log('1111'); // var hhhh = document.getElementById('d1'); // hhhh.innerText = '彭于晏'; }else if(a<1){ con

JS之BOM和DOM(来源、方法、内容、应用)

1.Javascript组成 JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接口 ECMAScript扩展知识: ① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript. ② "ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力--",即ECMAScript不与具

JavaScript:操作 BOM 和 DOM

JavaScript:操作 BOM 和 DOM 浏览器说明 由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的. 目前主流的浏览器分这么几种: IE 6~11:国内用得最多的IE浏览器,历来对W3C标准支持差.从IE10开始支持ES6标准: Chrome:Google出品的基于Webkit内核浏览器,内置了非常强悍的JavaScript引擎——V8.由于Chrome一经安装就时刻保持自升级,所以不用管它的版本,最新版早就支持ES6了:

百万年薪python之路 -- JS的BOM与DOM对象

BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面,就是刷新一下页面 定时器 1. setTimeOut() 一段时间之后执行某个内容,执行一次 示例 var a = setTimeout(function f1(){confirm("are you ok?");},3000); var a = setTimeout("co

js中BOM与DOM的相关知识基础

 [函数的声明及调用] 1.>>>函数声明的格式: function 函数名(参数1,参数2,--){ // 函数体 return 结果; } >>>函数调用的格式: 直接调用:函数名(参数1的值,参数2的值,--); 事件调用:事件名=函数名(); 2.函数声明的几点强调: ① 函数名的声明,必须符合小驼峰法则(首字母小写,之后每个单词首字母大写): ② 参数列表,可以有参数,可以无参数.分别称为有参函数,无参函数: ③ 声明函数时的参数列表,称为"形参列表

JS之BOM、DOM

一.BOM对象 1,window对象 所有浏览器都支持window对象,从概念上讲:一个HTML文档对应一个window对象,从功能上讲:控制浏览器窗口的,从使用上讲:window对象不需要创建对象,直接使用即可 2,window对象方法 alert() 显示带有一段消息和一个确认按钮的警告框. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框. prompt() 显示可提示用户输入的对话框. open() 打开一个新的浏览器窗口或查找一个已命名的窗口. close() 关闭浏

js操作BOM

//window.open(url, target); //window.close(); //在当前窗口打开,可后退 //原理:自动使用当前窗口的name HTML:<a href="url" target="_self"></a> js:open(url, '_self'); //在当前窗口打开,禁止后退 //原理:用新url替换当前history中的url js:location.replace(新url); //在新窗口打开,可打开多

js操作BOM对象

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>window对象</title> <!-- BOM:(浏览器对象模型 Browser Object Model) 浏览器页面的 前进 后退 刷新 页面跳转 都是Bom! 对整个浏览器窗口进行交互的对象模型! 包含的内容(对象): 1.window对象

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名