当前位置: 澳门新濠3559 > 服务器运维 > 正文

【澳门新濠3559】在浏览器地址栏可以直接运行

时间:2019-12-26 07:51来源:服务器运维
空格处理 HTML是Web同一语言,这些容纳在尖括号里得大略标签,构成了如今得Web。1991年,Tim Berners-Lee编写了一份叫做“HTML标签”得文档,内里包括了大约20个用来标记网页得HTML标签。他

空格处理

HTML是Web同一语言,这些容纳在尖括号里得大略标签,构成了如今得Web。1991 年,Tim Berners-Lee编写了一份叫做“HTML 标签”得文档,内里包括了大约20个用来标记网页得 HTML标签。他直接借用SGML得标记款式,也便是其后我们看到得HTML标记得款式。

对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和HTML5,还有Element Traversal (元素遍历)规范,为 DOM 添加了一些属性。除了这些标准拓展以外还有一些专有拓展。

当在DIV中输入"a[任意个空格]a" HTML呈现在Chrome和IE下是一样的:只显示一个空格。

今天互吾小编就整理下,那些你可能不知道的html5冷知识。

选择符API

Selectors API Level 1:IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+.

  • querySelector():返回匹配到的第一个元素,若无则返回null,如果传入不被支持的选择符则抛出错误.
html:
<div class="group">
    <div class="top">
        <div class="top-title">顶部标题</div>
        <div class="top-content">顶部内容顶部内容</div>
        <ul class="top-ul">
            <li>顶部第一行</li>
            <li>顶部第二行</li>
            <li class="top-li">顶部第三行</li>
            <li class="top-lastLi">顶部第四行</li>
        </ul>
    </div>
    <div class="bottom">
        <div class="bottom-title">底部标题</div>
        <ul class="bottom-ul">
            <li>底部第一行</li>
            <li>底部第二行</li>
            <li>底部第三行</li>
            <li>底部第四行</li>
        </ul>
    </div>
</div>
js:
    var ele = document.querySelector(".top-ul>li.top-li+li.top-lastLi");
    console.log(ele);
  • querySelectorAll():返回NodeList实例,其他特性与querySelector一样.
    ele = document.querySelectorAll("li");
    console.log(ele);
    for(var i=0,len=ele.length;i<len;i++){
        console.log(ele.item(i));
    }
  • 调用这两个方法的类型包括:Document,DocumentFragment和Element.
    var bottom = document.querySelectorAll('div.bottom')[0];
    console.log(bottom.querySelectorAll("li"));

Selector API Level 2:matchesSelector()方法判断调用元素与该选择符是否匹配,但这个方法的兼容性尚不知如何,可考虑使用msMatchesSelector , mozMatchesSelector , webkitMatchesSelector.

innerHTML属性

浏览器地址栏运行JavaScript代码
这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句。比如:

元素遍历

对于元素间的空格,IE9 及之前版本不会返回文本节点,而其他所有浏览器都会返回文本节点。这样,就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异,而同时又保 持 DOM 规范不变,Element Traversal 规范新定义了一组属性。

  • childElementCount:返回子元素(不包括文本节点和注释)的个数。
  • firstElementChild:指向第一个子元素;firstChild 的元素版。
  • lastElementChild:指向最后一个子元素;lastChild 的元素版。
  • previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。
  • nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
    var topUl = document.querySelector(".top-ul");
    console.log(topUl);
    console.log(topUl.childNodes.length);
    console.log(topUl.firstChild);
    console.log(topUl.lastChild);
    //可分别比较不同的地方
    console.log(topUl.childElementCount);
    console.log(topUl.firstElementChild);
    console.log(topUl.lastElementChild);

IE还是两个a加一个空格, Chrome则是原始输入的样子。

注意,执行javascript代码,要在浏览器中手工输入,复制代码的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码!!

HTML5

HTML5 规范围绕如何使用新增标记定义了大量 JavaScript API.

  • 1.类相关
    ①getElementsByClassName()方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的 NodeList。传入多个类名时,类名的先后顺序不重要。兼容性:IE 9+、Firefox 3+、Safari 3.1+、Chrome 和 Opera 9.5+.
    ②除了原有的className属性,新增了classList属性,可以很方便地操纵类:
    • length属性
    • item()方法
    • add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
    • contains(value):表示列表中是否存在给定的值,如果存在则返回 true,否则返回 false。
    • remove(value):从列表中删除给定的字符串。
    • toggle(value):切换:如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
    var boTitle = document.querySelector(".bottom-title");
    console.log(boTitle);
    console.log(boTitle.className);
    console.log(boTitle.classList);
    console.log(boTitle.classList.length);
    boTitle.classList.add("aa","bb","cc");
    console.log(boTitle.classList);
    boTitle.classList.remove("bb");
    console.log(boTitle.classList);
    boTitle.classList.toggle("common-title");
    console.log(boTitle.classList);
    boTitle.classList.toggle("dd");
    console.log(boTitle.classList);
    console.log(boTitle.classList.contains("bottom-title"));
    console.log(boTitle.classList.item(2));
  • 2.焦点管理
    ①activeElement属性:始终会引用 DOM 中当前获得了焦点的元素,元素获得焦点的方式有页面加载、用户输入(通常是通过按 Tab 键)和在代码中调用focus()方法.默认情况下,文档刚刚加载完成时,document.activeElement中保存的是 document.body元素的引用,文档加载期间,document.activeElement 的值为 null。
    ②document.hasFocus()方法:用于确定文档是否获得了焦点,可以知道用户是不是正在与页面交互。
  • 3.HTMLDocument的变化
    ①document.readyState:可能有的值:loading,interactive,complete等,可用它实现一个指示文档已经加载完成的指示器。
    document.onreadystatechange = function () {
        console.log(document.readyState);
        if(document.readyState == "complete"){

        }
    };

②兼容模式:compatMode属性。在标准模式下,document.compatMode等于"CSS1Compat",而在混杂模式下,document.compatMode等于"BackCompat"。
③head属性

var head = document.head || document.getElementsByTagName("head")[0];
  • 4.字符集属性
    ①document.charset获取到当前文档的字符集,②document.charset = "UTF-16",这句暂时没发现起作用,③document.defaultCharset:表示根据默认浏览器及操作系统的设置,当前文档默认的字符集应该是什么,但打印出来暂时看到的是undefined.

  • 5.自定义数据属性
    HTML5 规定可以为元素添加非标准的属性,但要添加前缀 data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以 data-开头即可。获取途径:
    ①getAttribute()方法
    ②元素的dataset属性:DOMStringMap 的一个实例,也就是一个名值对儿的映射(如果自定义属性是data-myname,那映射中对应的属性就是 myname).

  • 6.插入标记
    使用插入标记的技术,直接插入 HTML 字符串不仅更简单,速度也更快。
    innerHTML 属性
    在读模式下,innerHTML 属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应 的 HTML 标记。在写模式下,innerHTML 会根据指定的值创建新的 DOM 树,然后用这个 DOM 树完全替换调用元素原先的所有子节点。
    但是,不同浏览器返回的文本格式会有所不同。IE 和 Opera 会将所有标签转换为大写形式,而 Safari、 Chrome 和 Firefox 则会原原本本地按照原先文档中(或指定这些标签时)的格式返回 HTML,包括空格 和缩进。不要指望所有浏览器返回的 innerHTML 值完全相同。

    在写模式下,innerHTML 的值会被解析为 DOM 子树,替换调用元素原来的所有子节点。因为它的值被认为是 HTML,所以其中的所有标签都会按照浏览器处理 HTML 的标准方式转换为元素(同样,这里的转换结果也因浏览器而异)。如果设置的值仅是文本而没有 HTML 标签,那么结果就是设置纯文本。为 innerHTML 设置 HTML 字符串后,浏览器会将这个字符串解析为相应的 DOM 树。因此设置了 innerHTML 之后,再从中读取 HTML 字符串,会得到与设置时不一样的结果。原因在于返回的字符串是根据原始 HTML 字符串创建的 DOM 树经过序列化之后的结果。

    outerHTML属性
    在读模式下,outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下,outerHTML 会根据指定的 HTML 字符串创建新的 DOM 子树,然后用这个 DOM 子树完全替换调用元素。支持 outerHTML 属性的浏览器有 IE4+、Safari 4+、Chrome 和 Opera 8+。Firefox 7 及之前版本都不 支持 outerHTML 属性。

    insertAdjacentHTML()方法
    支持 insertAdjacentHTML()方法的浏览器有 IE、Firefox 8+、Safari、Opera 和 Chrome。它接收两个参数:插入位置和要插入的 HTML 文本。第一个参数必须是下列值之一:

    • beforebegin:插入前一个同辈元素
    • afterend:插入后一个同辈元素
    • afterbegin:插入的第一个子元素
    • beforeend:插入的最后一个子元素

    内存与性能问题
    在删除带有事件处理程序或引用了其他 JavaScript 对象子树时,就有可能导致内存占用问题。假设 某个元素有一个事件处理程序(或者引用了一个 JavaScript 对象作为属性),在使用前述某个属性将该元 素从文档树中删除后,元素与事件处理程序(或 JavaScript 对象)之间的绑定关系在内存中并没有一并 删除。如果这种情况频繁出现,页面占用的内存数量就会明显增加。因此,在使用 innerHTML、 outerHTML 属性和 insertAdjacentHTML()方法时,最好先手工删除要被替换的元素的所有事件处理 程序和 JavaScript 对象属性。

  • 7.scrollIntoView()方法
    scrollIntoView()方法不传参数或者传参数true,代表窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
    如果传参数false,调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视口底部平齐。)
    实际上,为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。

回车

浏览器地址栏运行HTML代码
如果说上面那条小秘密知道的人还算多的话,这条秘笈知道的人就要少一些了,在非IE内核的浏览器地址栏可以直接运行HTML代码!

专有拓展

  • 1.文档模式(IE)
  • 2.children属性(HTMLCollection实例:返回子元素数组,IE8及更早版本还会返回注释节点,其他都基本正常(safari2有bug))
  • 3.contains()方法:IE、Firefox 9+、Safari、Opera 和 Chrome.
    DOM Level 3 compareDocumentPosition(): IE9+、Firefox、Safari、Opera 9.5+和 Chrome
  • 4.插入文本
    innerText属性(IE4+、Safari 3+、Opera 8+和 Chrome,而Firefox 虽然不支持 innerText,但支持作用类似的 textContent 属性:IE9+、Safari 3+、Opera 10+和 Chrome)
    outerText 属性(IE4+、Safari 3+、Opera 8+和 Chrome),相当于删掉整个元素再用一个文本节点替代了.
  • 5.滚动(在chrome中实践不行)
    scrollIntoViewIfNeeded(alignCenter)(实现:safari和chrome)
    scrollByLines(lineCount)(实现:safari和chrome)
    scrollByPages(pageCount)(实现:safari和chrome)

当在DIV中输入"a[回车][任意个空格]a"时,HTML呈现Chrome和IE是一样的。

反正连互吾小编我,也是最近才无意中得知的。

innerHTML属性

比如在地址栏输入以下代码然后回车运行,会出现指定的页面内容。

IE是3个字符,在两个a中间加了个空格。 Chrome则是原始输入的样子,将回车解析为n。

如下图:

HTML标记

把浏览器当编辑器
还是浏览器地址栏上做文章,将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器,与Windows自带的notepad一样,吼吼。

当在DIV中输入"a
a" HTML呈现在Chrome和IE下是一样的。

如下图:

innerHTML属性

归根结底多亏了HTML5中新加的contenteditable属性,当元素指定了该属性后,元素的内容成为可编辑状态。

IE中是a
a,将HTML标记大写了! Chrome是a
澳门新濠3559,a,将HTML标记小写

推而广之,将以下代码放到console执行后,整个页面将变得可编辑!

TEXTAREA中回车

如下图:

在textarea多行输入框中输入a[回车]b,HTML呈现Chrome和IE是一样的。

利用a标签自动解析URL
很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性,然后就得到了一切我们想要的了。

value属性

如下图:

IE是4个字符,内容为:arnb Chrome是3个字符,内容为:anb 转载自

用上面方法,对浏览器参数进行操作!

页面拥有ID的元素会创建全局变量
在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量,这意味着document.getElementById像人的阑尾一样显得多余了。但实际项目中最好老老实实该怎么写就怎么写,毕竟常规代码出乱子的机会要小得多。

如下图:

加载CDN文件时,可以省掉HTTP标识
现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件,出于安全考虑有的CDN服务器使用HTTPS方式连接,而有的是传统的HTTP,其实我们在使用时可以忽略掉这个,将它从URL中省去。

利用script标签保存任意信息
将script标签设置为type='text'然后可以在里面保存任意信息,之后可以在JavaScript代码中很方便地获取。

当然,冷知识远不止这些呢。

编辑:服务器运维 本文来源:【澳门新濠3559】在浏览器地址栏可以直接运行

关键词: