前端基础之BOM和DOM

时间: 2019-06-09阅读: 855标签: js知识

JavaScript分为 : ECMAScript,DOM,BOM。

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

DOM (Document Object Model)是指文档对象模型,通过它,可以访问html文档的所有元素。

Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:document.write()。


BOM

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象 |

一些常用的Window方法:(在浏览器调试器的console里面输入下面这些属性或者方法,就能看到对应的效果)
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面,了解一下就行了)


window的子对象

navigator对象

navigator.appName  // Web浏览器全称
navigator.appVersion  // Web浏览器厂商和版本的详细字符串
navigator.userAgent  // 客户端绝大部分信息
navigator.platform   // 浏览器运行所在的操作系统

screen对象

 screen.availWidth - 可用的屏幕宽度
 screen.availHeight - 可用的屏幕高度

history对象

history.forward()  // 前进一页,其实也是window的属性,window.history.forward()
history.back()  // 后退一页

弹出框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

alert("你看到了吗?");
confirm("你确定吗?")
prompt("请在下方输入","你的答案")

location对象

location.href  获取URL
location.href="URL" // 跳转到指定页面
实例:location.href='http://www.baidu.com';
location.reload() 重新加载页面,就是刷新一下页面

计时器相关

setTimeout()
    var t=setTimeout("js语句",毫秒) #一段时间之后做某些事  第一个参数js语句多数是写一个函数,不然一般的js语句到这里就直接执行了,先用函数封装一下,返回值t其实就是一个id值(浏览器给你自动分配的)
    var t=setTimeout("confirm('你好')",3000);


clearTimeout()
    clearTimeout(setTimeout_variable)
    // 在指定时间之后执行一次相应函数
    var timer = setTimeout(function(){alert(123);}, 3000)
    // 取消setTimeout设置
    clearTimeout(timer);


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


DOM

选择器

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取(可以获取多个元素,所以返回的是一个数组)
document.getElementsByTagName     根据标签名获取标签合集
示例:
    <div class="c1" id="d1">
        待到将军归来日,朕与将军解战袍!
    </div>

    <div class="c1" id="d2">
        日照香炉生紫烟,遥看瀑布挂前川!
    </div>
    
    var a = document.getElementById('d1');  # 获取id属性值为d1的标签  拿到的直接是标签对象
    var a = document.getElementsByClassName('c1'); #获取class值为c1的所有标签  拿到的是数组
    var a = document.getElementsByTagName('div');  #获取所有div标签  拿到的是数组
    
    

间接查找

var a = document.getElementById('d1');
a.parentElement; #获取a这个标签的父级标签.
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

创建节点(创建标签) 
    var a = document.createElement('标签名称'); 
    示例,创建a标签
        var a = document.createElement('a');
    var dd = document.getElementById('dd'); 找到div标签
    
添加节点
    #添加节点,添加到了最后
    父级标签.appchild(要添加节点)
    dd.appendChild(a);将创建的a标签添加到dd这个div标签里面的最后.

    #在某个节点前面添加节点
    父级标签.insertBefore(新标签,某个儿子标签)
    示例
        var dd = document.getElementById('dd');  #找到父级标签
        var a = document.createElement('a');   #创建一个新的a标签
        var d2 = dd.children[1];  #找到父级标签下的某个儿子标签
        dd.insertBefore(a,d2);   #将a标签插入到上面这个儿子标签的前面.
删除节点
    dd.removeChild(d2);  父级标签中删除子标签
        
替换节点
    var dd = document.getElementById('dd');  #找到父级标签
    var a = document.createElement('a');  #创建a标签
    a.innerText = '百度';  
    var d1 = dd.children[0];  #找到要被替换的子标签
    dd.replaceChild(a,d1);  #替换
    

文本操作

d1.innerText; 查看

var divEle = document.getElementById("d1")
divEle.innerText  #输入这个指令,一执行就能获取该标签和内部所有标签的文本内容
divEle.innerhtml  #获取的是该标签内的所有内容,包括文本和标签

设置:
    d1.innerText = "<a href=''>百度</a>";  
    d1.innerhtml = "<a href=''>百度</a>";  能够识别标签

属性操作

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

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

值操作

var inp = document.getElementById('username');
inp.value;  #查看值
inp.value = 'taibai'; #设置值

选择框:
    <select name="city" id="city">
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
    </select>
    select标签.value
    select标签.value=option标签的value属性值   这个标签就被选中了
    
    
    
    var inp = document.getElementById('city');
    inp.value;  #查看值
    inp.value = '1';  #设置值
    

class的操作

var d = document.getElementById('oo'); 
d.classList;  #获得这个标签的class属性的所有的值
d.classList.add('xx2');  #添加class值
d.classList.remove('xx2'); #删除class值
d.classList.contains('xx2');  #判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2');  #有就删除,没有就增加

css操作

var d = document.getElementById('oo');
d.style.backgroundColor = 'deeppink';  有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写
d.style.height = '1000px'

事件

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

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

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

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

绑定事件的方式有两种

方式1:

<div id="d1" class="c1" onclick="f1();"></div>

<script>
    function f1() {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'yellow';
    }

</script>

方式2

    <div id="d1" class="c1"></div>

    var d = document.getElementById('d1');
    d.onclick = function () {
        d.style.backgroundColor = 'yellow';
    }

事件里面的this

绑定方式1:

this表示当前标签对象
<div id="d1" class="c1" onclick="f1(this);"></div>
function f1(ths) {
        // var d = document.getElementById('d1');
        // d.style.backgroundColor = 'yellow';
        ths.style.backgroundColor = 'yellow';

        var d = document.getElementById('d2');
        d.style.backgroundColor = 'yellow';
    }

方式2:

    <div id="d1" class="c1"></div>
    
    var d = document.getElementById('d1');
    d.onclick = function () {
        this.style.backgroundColor = 'yellow';
        // d.style.backgroundColor = 'yellow'; //this表示当前标签对象
    }

onblur和onfocus事件

 var inp = document.getElementById('username');
    inp.onfocus = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'pink';
    };
    // onblur 失去光标时触发的事件

    inp.onblur = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'green';
    };

onchange事件,域内容发生变化时触发

<select name="" id="jishi">
    <option value="1">太白</option>
    <option value="2">alex</option>
    <option value="3">沛齐</option>

</select>

// onchange事件,内容发生变化时触发的事件
    var s = document.getElementById('jishi');
    s.onchange = function () {
        //this.options  select标签的所有的option标签
        //this.selectedIndex被选中的标签在所有标签中的索引值
        console.log(this.options[this.selectedIndex].innerText + '搓的舒服');
    }
    
    
用户名:<input type="text" id="username">    

    //input标签绑定onchange事件
    var inp = document.getElementById('username');
    inp.onchange = function () {
        console.log(this.value);  
    };    



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4135

关闭

理解js中prototype和__proto__和的区别和作用?

在js中有句话叫一切皆对象,而几乎所有对象都具有__proto__属性,可称为隐式原型,除了Object.prototype这个对象的__proto__值为null。Js的prototype属性的解释是:返回对象类型原型的引用。每个对象同样也具有prototype属性,除了Function.prototype.bind方法构成的对象外。

Js实现点击查看全文(类似今日头条、知乎日报效果)

这篇文章主要为大家详细介绍了原生JS+css仿QQ今日头条、知乎日报点击查看全文的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.

前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

JS的变量作用域问题,理解js全局变量和局部变量问题

js的变量分为2种类型:局部变量和全局变量。主要区别在于:局部变量是指只能在变量被声明的函数内部调用,全局变量在整个代码运行过程中都可以调用。值得注意的js中还可以隐式声明变量,而隐式声明的变量千万不能当做全局变量来使用。

Js输出方式有哪些?

在编写JavaScript代码的时候, 一定要记住每一句代码后面都需要添加一个分号, 并且这个分号必须是英文的分号,我们会发现有时候不写分号程序也能够运行, 这里并不是因为不需要分号, 而是浏览器自动帮助我们添加了分号

base91 for javascript

原理和 base64 是一样的,ASCII 共有94个可打印字符,base64 使用了其中 64 个,base91 使用了 91 个。

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容,并且这些内容可以帮助你理解所有知识

JavaScript中的循环和作用域

JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的.const。最简单的方案是用 let 声明、另外一个非常普遍的解决这个问题是使用pre-ES6代码, 同时它被称作即时调用函数表达式(IIFE)

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

js中delete关键字

delete关键字的作用:删除对象的属性 语法:delete 对象.属性、可以删除没有使用var关键字声明的全局变量(直接定义在window上面的属性)、删除数组元素、不能删除内置对象的属性、不能直接删除从原型上继承的属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广