• 前端之BOM和DOM


    JavaScript分为ECNAScript,BOM, DOM

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

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

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

    BOM

    window对象

    所有的浏览器都支持window对象,它表示浏览器接口。

    如果文档包含框架(frame或ifram标签),浏览器回味HTML文档创建一个window对象,并为每个框架创建一个额外的 window 对象。

    *没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

    全局变量是 window 对象的属性。全局函数是 window 对象的方法。

    接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

    一些常用的Window方法:

    • window.innerHeight: 浏览器窗口内部高度

    • window.inner 浏览器窗口内部宽度

    • window.open(): 打开新窗口

    • window.close(): 关闭当前窗口

    window的子对象

    navigator对象

    浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。

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

    screen对象

    屏幕对象,不常用。

    一些属性:

    • screen.availwidth : 可用的屏幕宽度

    • screen.availHeight:可用的屏幕高度

    history对象

    history 对象保存着用户上网的历史记录,使用 go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。这个方法接受一个参数, 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于单击浏览器的“后退”按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)。 看例子:

    history.forward() // 前进一页
    history.back() // 后退一页
    history.go(-1); //后退一页
    history.go(1); //前进一页
    history.go(2); //前进两页

    location对象

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

    常用属性和方法:

    location.href 获取URL

    location.href="URL" // 跳转到指定页面

    location.reload() 重新加载页面

    弹出框

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

    警告框

    警告框经常用于确保用户可以得到某些信息。

    当警告框出现后,用户需要点击确定按钮才能继续进行操作。

    语法:

    alert("你看到了吗?");


    网页显示:你看到了吗?

     

    确认框(了解即可)

    确认框用于使用户可以验证或者接受某些信息。

    当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

    如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

    语法:

    confirm("你确定吗?")

    网页提示:你确定吗?

     

    提示框(了解即可)

    提示框经常用于提示用户在进入页面前输入某个值。

    当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

    如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

    语法:

    prompt("请在下方输入","你的答案")
    请在下方输入
    `你的答案`

    计时相关

    通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

     

    setTimeout()

    语法:

    var t=setTimeout("JS语句",毫秒)

     

    setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

    setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

    第二个参数指示从当前起多少毫秒后执行第一个参数(1000 毫秒等于一秒)。

    clearTimeout()

    语法:

    clearTimeout(setTimeout_variable)

     

    举个例子

    // 在指定时间之后执行一次相应函数

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

    // 取消setTimeout设置

    clearTimeout(timer);

     

    setInterval()

    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

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

    语法:

    setInterval("JS语句",时间间隔)

    返回值

    一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

    clearInterval()

    clearInterval() 方法可取消由 setInterval() 设置的 timeout。

    clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

    语法:

    clearInterval(setinterval返回的ID值)

     

    举个例子:

    // 每隔一段时间就执行一次相应函数

    var timer = setInterval(function(){console.log(123);}, 3000)

    // 取消setInterval设置

    clearInterval(timer);

    查询字符串参数

    虽然通过上面的属性可以访问到 location 对象的大多数信息,但其中访问 URL 包含的查询字符 串的属性并不方便。尽管 location.search 返回从问号到 URL 末尾的所有内容,但却没有办法逐个 访问其中的每个查询字符串参数。为此,可以像下面这样创建一个函数,用以解析查询字符串,然后返回包含所有参数的一个对象:

    function getQueryStringArgs() {    // ?username=mjj&pwd=18    // 1.取得查询字符串并去掉开头的问号    var qs = location.search.length > 0 ? location.search.substring(1) : "";    // 保存数据的对象    var args = {};    // 2.取得每一项    var items = qs.length ? qs.split('&'):  [];    var item = null,name =  null,value = null;    // 3.逐个将每一项添加到args对象中    for(var i = 0; i < items.length; i++){        item = items[i].split('=');        name = decodeURIComponent(item[0]);        value = decodeURIComponent(item[1]);        if (name.length) {            args[name]  = value;        }    }    return args;}//假设地址查询参数为?name=zhangsan&age=18//另外还要考虑?,=,&编码的情况var args = getQueryStringArgs();console.log(args);//{name: "zhangsan", age: "18"}

    位置操作

    href属性

    使用location对象可以通过很多方式来改变浏览器的位置.首先,也是最常用的方式通过href属性将其传递一个url

    栗子:2秒之后跳转到小猿圈的web页面

    setTimeout(function(){
    location.href = 'https://www.apeland.cn/web';},2000)

    当通过上述任何方式修改 URL 之后,浏览器的历史记录中就会生成一条新记录,因此用户通 过单击“后退”按钮都会导航到前一个页面。要禁用这种行为,可以使用 replace()方法。这个方法 只接受一个参数,即要导航到的 URL;结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记 录。在调用 replace()方法之后,用户不能回到前一个页面,

    栗子:2秒之后跳转网页但不会产生历史记录

    setTimeout(function(){    location.replace('https://www.apeland.cn/web');},2000)

    DOM

    DOM{Document(文档) Object(对象) Model(模型)}是一套对文档的内容进行抽象和概念化的方法。

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

    HTML DOM 模型被构造为对象的树。

    HTML树

     

    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.getElementsByName  根据标签获取标签合集

    间接查找

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

    节点操作

    创建节点

    createTextNode()方法创建新的文本节点,返回新创建的Text节点

    语法:

    document.createTextNode(data);

    参数:

    data: 字符串值,可规定此节点的文本

    例子:创建一个div并向其中添加一条消息:

    var newNode = document.createElement('div');
    var textNode  = document.createTextNode('我是一条文本信息');
    newNode.appendChild(textNode);
    document.body.appendChild(newNode);

    添加节点

    语法:

    追加一个子节点(作为最后的子节点)

    somenode.appendChild(newnode)

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

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

    示例:

    var imgEle=document.createElement("img");

    imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");

    var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);

    var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);

    删除节点:

    removeChild()方法从子节点列表中删除某个节点。如果删除成功,此方法可返回被删除的节点,如失败,则返回NULL

    语法:

    nodeObject.removeChild(node);

    参数:

    node:必需的,指定要删除的节点

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>节点的方法</title>
    </head>
    <body>
       <div id="box"><p>html</p></div>
       <script type="text/javascript">
           var oBox = document.getElementById('box');
           var x = oBox.removeChild(oBox.childNodes[0]);
           console.log(x);
       </script>
    </body>
    </html>


    注意:把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x =null来删除对象。

     

    替换节点:

    replaceChild实现子节点(对象)的替换。返回被替换对象的引用

    语法:

    node.replaceChild(newnode,oldnew);

    参数:

    newnode:必需,用于替换的oldnew的对象

    oldnew:必需,被newnode替换的对象

    例子:

    var oldnew = document.getElementById('text');var newNode  = document.createElement('p');newNode.innerHTML = 'Vue';oldnew.parentNode.replaceChild(newNode,oldnew);

    属性节点:

    在文档对象模型(DOM)中,每一个节点都是一个对象。DOM节点有三个重要的属性:

    1. nodeName: 节点的名称

    2. nodeValue:节点的值

    3. nodeType: 节点的类型

    1.nodeName属性:节点的名称,是只读
    1. 元素节点的nodeName与标签名相同

    2. 属性节点的nodeName与属性的名称相同

    3. 文本节点的nodeName永远是#text

    4. 文档节点的nodeName永远是#document

    2.nodeValue属性:节点的值
    1. 元素节点的 nodeValue 是 undefined 或 null

    2. 文本节点的 nodeValue 是文本自身

    3. 属性节点的 nodeValue 是属性的值

    3.nodeType 属性: 节点的类型,是只读的。

    以下常用的几种结点类型:

    元素类型节点类型
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

    验证

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>节点属性</title></head><body>    <div id="box">我是一个文本节点<!-- 我是注释 --></div>    <script type="text/javascript">        // 1.获取元素节点        var divNode = document.getElementById('box');        console.log(divNode.nodeName + '|' + divNode.nodeValue + "/" + divNode.nodeType);        // 2.获取属性节点        var attrNode = divNode.attributes[0];        console.log(attrNode.nodeName + '|' + attrNode.nodeValue + "/" + attrNode.nodeType);        // 3.获取文本节点        var textNode = divNode.childNodes[0];        console.log(textNode.nodeName + '|' + textNode.nodeValue + "/" + textNode.nodeType);        // 4.获取注释节点        var commentNode = divNode.childNodes[1];        console.log(commentNode.nodeName + '|' + commentNode.nodeValue + "/" + commentNode.nodeType);        // 5.文档节点        console.log(document.nodeName + '|' + document.nodeValue + "/" + document.nodeType);    </script></body></html>
    • attributes属性是获取到该节点对象上的所有属性的集合

    • childNodes属性是获取到该节点对象的所有子节点的集合

    innerText属性

    仅仅对元素来获取或者设置该文本

    newNode.innerText = 'mjj';console.log(newNode);//<p>mjj</p>

    如果像在p标签插入一段<a>mjj</a>,会发现<a>mjj</a>它也会充当文本的来进行设置。

    innerHTML属性

    既可以设置文本又可以设置标签

    newNode.innerHTML = '<a>mjj</a>'

    注意:如果想获取节点对象的文本内容,可以直接调用innerText或者innerHTML属性来获取

    1.getAttrbute()方法

    getAttribute()方法只接收一个参数——你打算查询的属性的名字。

    语法:

    object.getAttribute(attributeName: DOMString)

    比如上述案例,如何将p标签中的title属性打印出来

    var oP = document.getElementsByTagName('p')[0];var title = oP.getAttribute('title');console.log(title);

     

    如果查询不到结果,则该调用则返回null,null是JavaScript语言中的空值,其含义是’你说的这个东西不存在‘

    2.setAttribute()方法

    setAttrbute()方法它允许我们对属性节点的值做出修改。此方法传递两个参数。第一个参数为属性名,第二个参数为属性值

    语法:

    object.setAttribute(attribute,value)

    例如:

    var classList = document.getElementById('classList');classList.setAttribute('title','这是我们最新的课程');

     

    获取值操作

    语法:

    elementNode.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 文本框内容改变
    onkeydown 某个键盘按键被按下时。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
    onkeypress 某个键盘按键被按下并松开
    onkeyup 某个键盘按键被松开
    onload 网页加载事件
    onmousedown 鼠标按钮按下
    onmousemove 鼠标移动
    onmouseout 鼠标从元素移开
    onmouseover 鼠标移动到元素上
    onselect 在文本框中的文本被选中时发生
    onsubmit 确认按钮被点击,使用的对象是form。
       

    绑定方法

    一:

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

    注意:

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

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

    二:

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

     

  • 相关阅读:
    第01章_数据库概述
    Linux从入门到入土
    第02章_MySQL环境搭建
    初识kubernetes
    vscode显示"no view is registered with ID: codespaces. Explorer"or "no view is registered with ID: codespaces. Explorerdetails"错误提示信息怎么解决
    [other] SSH login后不运行 .bashrc
    计算机英语词汇文件夹
    安装脚本文件夹
    rpm管理包笔记
    IDC运维_1
  • 原文地址:https://www.cnblogs.com/zfb123-/p/11704358.html
Copyright © 2020-2023  润新知