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()

  在范围里插入:。。。

  折叠:。。。

  比较:。。。

  复制:。。。

  清理:。。。

时间: 2024-12-06 08:51:58

js高程笔记10-12章的相关文章

js高程笔记16-20章

第16章 HTML5脚本编程 1.跨文档消息传送XDM:向包含在当前页面的<iframe>元素或由当前页面弹出的窗口传递数据. 原窗口发送:postMessage(内容,目标域名) 目标窗口接收后触发window对象的message事件,event对象的属性有data,origin,source 2.原生拖放: 拖放事件:拖放元素上dragstart,drag,dragend,放置元素上dragenter,dragover,dragleave或者drop dataTransfer对象:even

C++ primer plus读书笔记——第12章 类和动态内存分配

第12章 类和动态内存分配 1. 静态数据成员在类声明中声明,在包含类方法的文件中初始化.初始化时使用作用域运算符来指出静态成员所属的类.但如果静态成员是整形或枚举型const,则可以在类声明中初始化. P426-P427类静态成员的声明和初始化 //strnbad.h class StringBad { private: static int num_strings; … }; //strnbad.cpp int StringBad::num_strings = 0; 不能在类声明中初始化静态

js高程笔记4-5章

第四章 变量/作用域和内存问题 1.从一个变量给另一个变量赋值时,如果是赋基本类型值,是创建一个值副本,两个变量操作互不影响.如果是赋引用类型值,是创建一个引用(指针)的副本.两个变量指向同一个对象,操作互相会影响. 2.函数传参时,如果传基本类型值,函数局部作用域修改值不会再全局作用域体现出来.传引用类型值,局部作用域修改对象会在全局作用域体现出来.P71 3.检测基本数据类型用typeof,检测引用类型值时,想知道是什么类型的对象,用instanceof. 4.js没有块级({})作用域,一

js高程笔记8-10章

第8章 BOM 1.window对象:既是BOM的核心对象,也是ES的Global对象. 2.如果页面包含框架(frame),每个框架都有自己的window对象,保存在frames集合中. 3.top对象始终指向最外层框架,即浏览器窗口,使用它可以在一个框架中访问另一个框架. parent对象始终指向当前框架的上层框架. self对象始终指向window. 4.window对象关于窗口位置的属性: (1)screenLeft和screenTop(火狐不支持)/screenX和screenY(IE

js高程笔记1-3章

第1章 js简介 1.js由三部分组成,ECMAScript, DOM, BOM. 第2章 在HTML中使用js 1.把<script>标签放在<body>里面的最后,可以在加载js文件前显示页面内容,对用户友好. 2.<script>标签的defer属性表示脚本延迟到页面解析完再执行,async表示表下载脚本边加载HTML,相当于异步. 第3章 基本概念 1.js一切都区分大小写.标识符第一位不能是数字. 2.js五种基本类型:undefined,null,boole

js高程笔记6章

第6章 1.ES有两种属性:数据属性和访问器属性.属性中包含各种特性,表示属性的各种特征. 数据属性:[[Configurable]],[[Enumerable]],[[Writable]],[[Value]] 修改属性使用方法:Object.defineProperty() 访问器属性:[[Configurable]],[[Enumerable]],[[Get]],[[Set]] 访问器属性不包含数值.只能通过Object.defineProperty()定义.通过设置set和get函数,分别

js高程笔记14-15章

第14章 表单脚本 1.提交表单: <input>和<button>标签type设置成submit <input>标签type设置成image 以上方式提交表单会触发submit事件 使用js:form.submit()也可以提交,但不触发事件 可以利用事件验证表单内容和避免重复提交(不能用click触发) 2.重置表单:form.reset() 3.表单elements属性:是所有表单字段的集合 表单字段属性:disabled,form,type,name,value

js高程笔记13章

第13章 事件 1.事件流:描述从页面中接收事件的顺序. 三个阶段:捕获,处于目标,冒泡. 2.事件处理程序:局部变量event表示事件对象,this值为事件目标元素. (1)HTML事件处理程序:可以访问特性.弊端:可能调用事件处理程序时,函数还未定义.同时代码紧密耦合,修改不便. (2)DOM0级事件处理程序:this引用当前元素.弊端:一个元素只能添加一个事件处理程序. (3)DOM2级事件处理程序:addEventListener()和removeEventListener().无法移除

算法导论学习笔记——第12章 二叉查找树

二叉查找树性质 设x是二叉查找树中的一个结点,如果y是x的左子树中的一个结点,则k[y]<=key[x]:如果y是右子树中的一个结点,则k[y]>=k[x] 1 //中序遍历算法,输出二叉查找树T中的全部元素 2 INORDER-TREE-WALK(x) 3 if x!=nil 4 then INORDER-TREE-WALK(left[x]) 5 print key[x] 6 INORDER-TREE-WALK(right[x]) 查找 1 //递归版本 2 TREE-SEARCH(x,k)