zoukankan      html  css  js  c++  java
  • JS加强学习-DOM学习02

    4. 获得或设置页面文本内容的方式

    innerText

    innerHTML

    textContent

    区别:

    4.1 获取页面文本内容:

    innerText只获取标签间的文本信息,不包括其中的标签,而innerHTML是获得标签之间的所有内容包括标签,而且有些浏览器会将获取的内容原样输出,innerHTML是所有浏览器都支持,没有兼容性的问题,而innerText是IE8及早期的IE浏览器支持的,老版本火狐浏览器只支持textContent不支持innerText。

    4.2 设置文本内容:

    innerText会原样输出,里面即使有标签也渲染不出来,会将标签转义成文本。

    innerTHML是可以把字符串中的标签按HTML的标签原样的标签格式渲染呈现出来。

    4.3 兼容性问题:

    在讨论innerText与innerHTML之间的区别时,会遇到浏览器不兼容的情况,这就是兼容性问题,本质是看浏览器是否支持当前对象的属性或是方法,如果支持就说明是兼容,如果不支持,就说明不兼容。而在写代码时就需要考虑到用户的多版本浏览器的兼容性,我们常会在代码中写一段用于兼容各浏览器的代码。主要原则就是判断各种不同浏览器是否适用某些对象的属性和方法。

    5. 常用事件

    onclick:鼠标单击对象时触发

    ondblclick:鼠标双击对象时触发

    onkeyup:按下并释放键盘上的一个键时触发

    onchange:文本内容或下来菜单中的选项发生改变时触发

    onfocus:获得焦点,表示文本框等对象获得鼠标光标进入点击时触发

    onblur:失去焦点,表示文本框等对象失去鼠标光标,鼠标光标点击在别处后触发

    onmouseover:鼠标停留在图片等对象的上方时触发

    onmouseout:鼠标离开图片等对象所在的区域时触发

    onload:在页面或图像加载完成后触发

    onunload:用户退出或关闭网页时触发

    onsubmit:表单提交时触发

    onreset:表单重置时触发

    6.自定义属性

    6.1 可以使用行内式的方式给标签直接添加属性,例如下面的num属性:

    <input type="text" class="ip" id="txt" value="123" aa="456"/>

    这种方式设置的自定义的属性无法通过“事件源.属性”的方式获取到设置的值,可以通过txt.getAttribute("num")的方式来获取属性值。

    6.2 还可以通过 JS来设置自定义属性

    txt.mm = "258";  // 是可以通过 JS来设置自定义属性的

    6.3 对象方式来设置或删除标签属性

    txt.setAttribute("lll","7899");  // 可以通过setAttribute来设置对象的属性。

    txt.className = "";  // 将属性值清空,但是属性名还存在标签中。

    txt.removeAttribute("class"); // 彻底删除标签的属性,将属性名也删除。

  • 相关阅读:
    LeetCode 295. Find Median from Data Stream (堆)
    LeetCode 292. Nim Game(博弈论)
    《JavaScript 模式》读书笔记(4)— 函数2
    《JavaScript 模式》读书笔记(4)— 函数1
    《JavaScript 模式》读书笔记(3)— 字面量和构造函数3
    《JavaScript 模式》读书笔记(3)— 字面量和构造函数2
    《JavaScript 模式》读书笔记(3)— 字面量和构造函数1
    《JavaScript 模式》读书笔记(2)— 基本技巧3
    《JavaScript 模式》读书笔记(2)— 基本技巧2
    《JavaScript 模式》读书笔记(2)— 基本技巧1
  • 原文地址:https://www.cnblogs.com/chendu/p/5745112.html
Copyright © 2011-2022 走看看