zoukankan      html  css  js  c++  java
  • js高程笔记10-12章

    第10章 DOM

    1.文档节点是每个文档的根节点。<html>为文档元素,为文档最外层元素。HTML元素——元素节点,特性——特性节点,文档类型——文档类型节点,注释——注释节点

    2.Node类型:所有节点类型都继承自Node类型,共享基本的属性和方法。

      基本属性:nodeType,nodeName,nodeValue

      节点关系:childNodes,parentNode,previousSibling,nextSibling,firstChild,lastChild,hasChildNodes(),ownerDocument

      操作节点:appendChild(),insertBefore(),replaceChild(),removeChild(),cloneNode(深复制/浅复制),normalize()

    3.Document类型:document对象是HTMLDocument(继承自Document类型)的一个实例,而且还是window对象的一个属性。

      子节点:Document节点(文档节点)的子节点可能有DocumentType、Element、ProcessingInstruction、Comment。

          document.documentElement,始终指向<html>元素

          document.body,指向<body>元素

          document.doctype,取得对<!DOCTYPE>的引用

      文档信息:document.title、document.URL、document.referrer、document.domain

      查找元素:getElementById()、getElementsByTagName()、namedItem()、getElementsByName()、

      特殊集合:document.anchors、document.forms、document.images、document.links

      一致性检测:document.implementation.hasFeature()

      文档写入:write()、writeln()、open()、close()

    4.Element类型:表现HTML元素,提供对元素标签名、子节点、特性的访问。

      标签名:nodeName/tagName

      html元素:由HTMLElement的子类型来表示,每个html元素都有的属性:id、title、lang、dir、className(特性为class)。

        所有标签的公认特性都有相应属性。并且可读可写。

      取得特性:getAttribute(),setAttribute(),removeAttribute()

        自定义特性可以通过getAttribute()取得,但是不能通过访问属性取得。

        两个特殊特性:style和onclick。它们用getAttribute()和属性访问返回的值不同。

      attribute属性:在DOM层面上针对元素节点里的特性节点来访问和操作。

        方法:getNamedItem(),removeNamedItem(),setNamedItem(),item(pos)。这些方法不如getAttribute()等方便。

        可以使用这些遍历元素特性。P267

      创建元素:document.createElement()。

      元素子节点:有的浏览器使用childNodes属性会将文本节点注释节点算进去,所以遍历的时候要检测nodeType属性。

        取得某元素节点的某标签名的所有后代节点:元素节点.getElementsByTagName()。

    5.Text类型:由Text类型表示

      使用div.firstNode.(nodeValue/data)访问和修改文本节点内容

      创造文本节点:document.createTextNode()

      合并相邻文本节点:normalize()

      分割文本节点:splitText()

    6.comment类型:表示注释

      创建注释节点:document.createComment()

    7.CDATASection类型:针对XML文档的CDATA区域。

    8.DocumentType类型:包含与文档的doctype有关的所有信息。

    9.DocumentFragment类型:作为仓库保存将来可能添加到文档的节点。

      创建文档片段:document.createDocumentFragment()。

      文档片段是将里面的所有子节点转移到文档指定位置上,文档片段本身不会成为文档树的一部分。

    10.创建动态脚本:指在本身不存在于HTML文档中,但通过js动态创建<script>标签加进HTML文档中。

    11.动态样式:通过js动态创建<link>和<style>标签加进HTML文档中

    12.操作表格:提供专门的一些方法来创建表格的标签。P282

    13.动态集合:文档结构发生变化时动态集合都会更新。

      NodeList:保存节点的集合——使用childNodes返回P249

      NamedNodeMap:保存特性的集合——使用attribute属性P266

        HTMLCollection:保存节点集合——使用getElementsByTagName()返回P257

    第11章 DOM拓展

    1.选择符API:(level 1)querySelector()和querySelectorAll()

            (level 2)element.matchesSelector()

    2.元素遍历:previousElementSibling,nextElementSibling,firstElementChild,lastElementChild,childElementCount返回的都是元素节点,避免了文本、注释等混淆

    3.HTML5:

      类拓展:getElementsByClassName(),classList属性

      焦点管理:document.activeElement,document.hasFocus()

      HTMLDocument拓展:document.readyState属性,document.compatMode属性,document.head属性

      字符集属性:document.charset和document.defaultCharset

      自定义数据属性:element.dataset属性,通过属性访问自定义特性,自定义特性前要加“data-”。

      插入标记:innerHTML属性,outerHTML属性,insertAdjacentHTML()

        在使用上述属性和方法前最好先手动解除被替换节点和事件的关系,否则容易造成性能问题。

        不要频繁使用innerHTML和outerHTML

      scrollIntoView()调用的时候让调用元素出现在视口中。

    第12章 DOM2和DOM3

    1.DOM2级样式:

      访问特性样式:style对象的属性对应着style特性中的css属性(css的float对应着style.cssFloat)

        一些属性和方法:style.cssText,getPropertyValue(),removePropery(),document.defaultView.getComputedStyle()(只读)

      操作样式表:document.stylesheets返回样式表集合,cssRules返回规则列表,insertRule()创建规则,deleteRule()删除规则

      元素大小:offsetHeight,offsetWidth,offsetLeft,offsetTop

           clientWidth,clientHeight

           scrollHeight,scrollWidth,scrollLeft,scrollTop

    2.遍历:document.createNodeIterator(),document.createTreeWalker()

    3.范围:

      设置:createRange(),selectNode(),selectNodeContents(),setStart(),setEnd()

      操作:deleteContents(),extractContents(),cloneContents()

      在范围里插入:。。。

      折叠:。。。

      比较:。。。

      复制:。。。

      清理:。。。

  • 相关阅读:
    DataTable用中使用Compute 实现简单的DataTable数据的统计
    绑定生成一个有树结构的下拉菜单
    Docker--UI管理-----------Portainer安装部署使用
    调整系统的inode数量
    配置Linux服务器从第三方 SMTP 服务器外发邮件
    Jenkins的用户角色权限管理
    shell脚本----MongoDB4.0.21一键安装
    Shell----监控CPU/内存/负载高时的进程
    MySQL配置参数优化
    shell脚本实现---Zabbix5.0快速部署
  • 原文地址:https://www.cnblogs.com/little-jelly/p/5757474.html
Copyright © 2011-2022 走看看