• DOM&BOM


    DOM:DOM 全称是 Document Object Model,也就是文档对象模型DOM 是 W3C(万维网联盟)的标准。

    DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

    W3C DOM 标准被分为 3 个不同的部分:

    • 核心 DOM - 针对任何结构化文档的标准模型
    • XML DOM - 针对 XML 文档的标准模型
    • HTML DOM - 针对 HTML 文档的标准模型

    1、DOM起源(recourse):1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也难觅踪影了。

    2、DOM方法:

    可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

    所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。

    方法是您能够执行的动作(比如添加或修改元素)。

    属性是您能够获取或设置的值(比如节点的名称或内容)。

    3、DOM内容:来自于w3school

    1、通过 HTML DOM,JavaScript 能够访问 HTML 文档中的每个元素。

    2、通过 HTML DOM,您能够访问 HTML 对象的样式对象

    3、HTML DOM 允许您在事件发生时执行代码。

    HTML 元素”有事情发生“时,浏览器就会生成事件:

    • 在元素上点击
    • 加载页面
    • 改变输入字段

     

    4、DOM应用:

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

    作者:zhaoke_930325

    来源:CSDN

    原文:https://blog.csdn.net/zhaoke_930325/article/details/75635179

    版权声明:本文为博主原创文章,转载请附上博文链接!

    查找元素、改变HTML

    样式、使用事件(在元素上点击、加载页面、改变输入字段)

     

    1、子节点的删除可以用’javascript:;’来作为删除选项:

    for (var i = 0; i < aA.length; i++) {

                aA[i].onclick = function(){

                    oUl.removeChild(this.parentNode);

                };

            }

    2、childNodes只支持IE6-8,且包括文本节点和元素节点,而children只包括元素,不包括文本节点。

    3、子节点指的是只算第一层的节点,而内层节点不算。

    4、parentNode:当前的父节点,是获取用来定位的父级。

    5、setAttribute(名称,值)方法添加指定的属性,并为其赋指定的值。

    如果这个指定的属性已存在,则仅设置/更改值。getAttribute用来获取属性。

    document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

    6、获取元素属性的方法:

    function getStyle(oParents,sClass)

            {

                var aEle = oParents.getElementsByTagName('*');

                var aResult[];

                for (var i = 0; i < aEle.length; i++) {

                    if(aEle[i].className=sClass)

                    {

                        aResult.push(aEle[i]);

                    }

                }

                return aResult;

            };

    7、父级调用的方法有:

    .appendChild(子节点)增加子节点,过程是先把元素从原有的父级删掉,再添加到新的父级;.insertBefore(子节点,在谁之前);.removeChild(子节点)移除子节点。

    8、在DOM文档中可以通过 document.createDocumentFragment();来创建表格,通过调用 .tBodies[i]取body,.rows[i]取行,.cells[i]取单元格,.toLowerCase()转为小写,用于搜索时不区分大小写,.search(‘str’)值为位置,当值等于 -1 时,为没有找到(模糊搜索),.split(‘str’)切分字符串。

    9、.sort()是Arr数组特有的方法,输入时失去焦点时的验证,onkeyup onblur,

    提交检查onsubmit。

    BOM:

    BOM 是 Browser Object Model,浏览器对象模型。简单地说,BOM和DOM一样,只不过DOM操作的是HTML中的元素,BOM是浏览器的API、操作的是浏览器(即控制浏览器的行为)

    所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至文档对象(HTML DOM)也是window对象的属性: 一些常用的Window方法:可以使用两个属性来确定浏览器窗口的大小。两个属性都以像素为单位返回大小:

    • window.innerHeight - 浏览器窗口的内部高度(以像素为单位)
    • window.innerWidth - 浏览器窗口的内部宽度(以像素为单位)
    • 其他一些方法:
    • window.open() - 打开一个新窗口
    • window.close() - 关闭当前窗口
    • window.moveTo() - 移动当前窗口
    • window.resizeTo() - 表示当前窗口

    1、window.screen对象包含有关用户屏幕的信息

    2、screen.width属性返回访问者屏幕的宽度(以像素为单位)。

    3、screen.height属性返回访问者屏幕的高度(以像素为单位)

    4、screen.availWidth属性返回访问者屏幕的宽度(以像素为单位),减去Windows任务栏等界面功能

    5、screen.availHeight属性返回访问者屏幕的高度(以像素为单位),减去Windows任务栏等界面功能。

    6、screen.colorDepth属性返回用于显示一种颜色的位数。所有现代计算机都使用24位或32位硬件进行颜色分辨24位= 16,777,216种不同的“真彩色”32位= 4,294,967,296种不同的“深色”

    7、screen.pixelDepth属性返回屏幕的像素深度。 

    8、window.location对象可用于获取当前页面地址(URL)并将浏览器重定向到新页面。 

  • 相关阅读:
    谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
    谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
    【Web动画】SVG 实现复杂线条动画
    【Web动画】SVG 线条动画入门
    引人瞩目的 CSS 变量(CSS Variable)
    谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
    ROW_NUMBER() OVER函数的基本用法
    PL SQL笔记(三)
    pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
    无聊的人用JS实现了一个简单的打地鼠游戏
  • 原文地址:https://www.cnblogs.com/yyqxlcx/p/9867864.html
Copyright © 2020-2023  润新知