DOM拓展

时间：2022-09-10 12:59:34

DOM拓展

1、选择符API

所谓选择符API即是根据css选择符选择与某个模式相匹配的DOM元素，jQuery的核心就是通过css选择符查询DOM文档取得元素的引用，从而抛弃了原有繁琐的getELement等等

querySelector()方法：接受一个css选择符，有则返回该元素，没有则返回null。通过document类型调用其，则在文档元素<html>中查找;通过element类型调用其，则在该元素后代元素范围内查找

var body=document.querySelector("body")    获得body
var mydiv=document.querySelector("#div")    获得id为div的元素
var mydiv=document.querySelector(".div")     获得class为div的元素

querySelectorAll()方法：跟querySelector差不多，只是返回的是一个NodeList实例，

var ems=document.getElementById("div").querySelectorAll("em")  获得div中的所有em

var mydivs=document.querySelectorAll(".div")  获得所有class为div的div

matchesSelector()方法，为element检测是否存在返回值，是个布尔值，浏览器差异大，不常用

2、HTML5

2.1与类相关的扩充

getElementsByClassName HTML5的原生扩充，其中也是NodeList的实例，同时也增加classList属性操作class，classList是新集合类型DOMTokenList的实例，一些方法操作class

var allCurrentUsername=document.getElementsByClassName("uesername Current")  返回包含username和Current类的元素

div.classList.remove("user")  移除user

div.classList.add("user")     添加user

div.classList.toggle("user")  切换user

if(div.classList.contains("user")&&!div.classList.contains("username"))  确定元素中是否包含既定的类名

2.2焦点管理

提高web应用的无障碍性,document.activeELement始终引用DOM当前获得焦点的元素

var btn=document.getELementById("btn")

btn.focus()                             添加焦点

alert(document.activeELement===btn)     true

alert(document.hasFocus())              true     判断页面是否获得焦点

2.3自定义属性

HTML5规定可以为元素添加非标准的属性，但前面加data-前缀，达到浏览器方便渲染，语义化加强；在DOM基础中有setAttribute("data-age"，"14")添加自定义，本次详细说一下。通过dataset属性来访问自定义属性的值，其是DOMStringMap的一个实例

div=document.getElementById("div")

设置自定义属性

var  age=div.dataset.age

var  name=div.dataset.name

为自定义属性赋值

div.dataset.age=14

div.dataset.name="double"

2.4插入标记

innerHTML属性：返回与调用元素的所有子节点（包括元素、注释、文本节点）对应的HTML标签。不是所有的元素都支持innerHTML属性

outerHTML属性：返回调用元素自身及其所有子元素的HTML标签

insertAdjacentHTML()方法：插入标记，不常用

内存与性能问题：当使用插入标记的三个属性后，由于原来的元素的所有事件处理程序和js对象属性没有删除导致内存的占用，最好手动删除；使用插入标记会比js操作DOM节点快很多，但是由于创建和销毁HTML解析器导致性能损失，最好这样做：

var itemHtml=""

for(var i=0,len=values.length;i<len;i++){

    itemHtml+="<li>"+values[i]+"</li>"

}

ul.innerHTML=itemsHtml    只对innerHTML进行一次赋值操作

对比着文档片段来看，有相似之处，还有NodeList也是为了防止浏览器多次重复渲染

var fragment=document.createDocumentFragment（）

for(var i=0;i<5;i++){

     newli=document.createElement("li")

     newli.appendChild(document.createTextNode("item")+(i+1))

     fragment.appendChild(newli)

}

document.body.appendChild(fragment)

3、专有拓展

3.1文档模式

让IE浏览器始终以最新文档模式渲染页面<meta http-equiv="X-UA-Compatible" content="IE=Edge">；同时，document.documentMode来获取给定页面的文档模式

3.2children属性

对IE9以下版本的兼容，解决处理文本节点空白符的问题

3.3插入文本

3.4滚动

专用拓展都不常用，看书了解下就可以。

3、DOM2和DOM3

DOM2级和DOM3级的目的在于拓展API，以满足XML的所有需求，提供更好的错误处理及特性检测。针对xml命名空间的有些变化，省略

1样式

1.1样式变化

1.1.1访问元素样式

对于使用短划线的css属性名，必须将其转为驼峰形式才通过js访问，比如background-image转为backgroundImage    font-family转为fontFamily

由于float为保留字，所以转换为CSSFloat，IE支持styleFloat

var div=document.getElementById("div")    通过style来获取行间样式

div.style.width="200px"

div.style.height="200px"

div.style.background="red"

DOM2级为css做一系列的属性和方法，用来快捷操作

div.style.cssText={width:200px;height:200px;background:red;} 设置cssText是为元素应用多项变化最快捷的方式，可以一次性应用所有变化

var prop,value,i,len;

for(i=0;len=div.style.length;i<len;i++){

     prop=div.style[i]

     value=div.style.getPropertyValue(prop)                  getPropertyValue()方法来获得属性值     removeProperty()移除某个css属性

     alert(prop+":"+value)

}

1.1.2计算的样式

一般来说，用style获取行间样式，而非行间样式，则采用以下方法

function getStyle(obj,attr){

     if(obj.currentStyle){                     兼容IE

          obj.currentStyle[attr];

   }

     else{                                     兼容其他浏览器

          getComputedStyle(obj,false)[attr]

   }

}

alert(getStyle(div,"width"))                   获得非行间样式

DOM2级中增强document.defaultView，提供getComputedStyle()方法，接受两个参数，一个为计算样式的元素，一个是伪元素字符串（:after）不需要伪元素则为null/false，IE则是currentStyle，但是，无论在哪个浏览器中，所有要计算的样式都是只读的。

1.2操作样式表（不常用，先省略）

1.3元素大小（重点）

1.3.1偏移量

元素的可见大小是由其高度和宽度所决定的，包括内边距，滚动条，边框大小（不包括外边距）

offsetHeight：元素垂直方向所占用的空间；offsetWidth：元素水平方向所占用的空间

offsetTop：元素的上外边框至包含元素的上内边框的像素距离；offsetLeft：元素的左外边框至包含元素的左内边框的像素距离

利用offsetParent属性进行回溯，获得基本准确的值

简单页面中getElementLeft()  getElementTop()返回相同的值

function getElementLeft(element){

      var actualLeft=element.offsetLeft;

      var current=element.offsetParent;

      while(current!==null){

            actuallLeft+=current.offsetLeft;

            current=current.offsetParent;

    }

      return actualLeft;

}

function getElementTop(element){

      var actualTop=element.offsetTop

      var current=element.offsetParent;

      while(currrent!==null){

           actualTop+=current.offsetTop

           current=current.offsetParent

    }

      return actualTop

}

1.3.2客户区大小

客户区大小指的是元素内容及内边距占据的空间大小，不包括边框，另个clientWidth和clientHeight

var clientHeight=document.documentElement.clientHeight||document.body.clientHeight

var clientWidth=document.documentElement.clientWidth||document.body.clientWidth

1.3.3滚动大小

指的是包含滚动内容的元素的大小，有些元素（html）能自动添加滚动条，而有些必须通过css的overflow属性设置

scrollHeight：没有滚动条下为元素内容的总高度；scrollWidth：没有滚动条下为元素内容的总宽度，不包含边框的

scrollLeft：被隐藏在内容区域左侧的像素位，可以改变元素滚动位置；scrollTop：被隐藏在内容区域上侧的像素位，可以改变元素滚动位置

通过scrollLeft和scrollTop既可以确定元素当前滚动的状态，又可以设置元素的滚动位置，尚未滚动则为0，设置为0，则重置位置

由于兼容性问题,最好做下最大值以达到最精准的效果

var clientHeight=document.documentElement.scrollHeight||document.body.scrollHeight

var clientWidth=document.documentElement.scrollWidht||document.body.scrollWidth

var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.scrollHeight)

var docWidth=Math.max(document.documentElement.scrollWidth,document.doucmentELement.scrollWidth)

function scrollTop(element){                 回到顶部

     if(element.scrollTop!=0){

        element.scrollTop=0

    }

}

1.3.4确定元素大小（不常用，先省略）

3、遍历

DOM2定义了两个用于辅助完成顺序遍历DOM的类型：NodeIterator和TreeWaker

都接受四个参数

root：搜索起点的树中节点；whatToShow：表示访问哪些节点的数字代码；filter：过滤器，可以null；entityRefereenceExpansion：布尔值false

NodeIterator类型：两个方法nextnode() ，previousNode()

var filter={                      定义一个过滤器，只要p节点

  acceptNode：function(node){

  return node.tagName.toLowerCase()=="p"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;

    }

}

var iterator=document.createNodeIterator(root,NodeFliter.SHOW_ELEMENT,filter,false)    整个iterator

var div=document.getElementById("div")              遍历div中的所有子节点，没有过滤器，有过滤器就直接的加入

var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false)

var node=iterator.nextNode()

while(node!==null){

    alert(node.tagName)

    node=iterator.nextNode()

}

TreeWalker类型：包含nextNode() prevousNode() parentNode() firstChild() lastChild() nextSibling()  nextSibling()几种方法

var div=document.getElementById("div")

var filter=function(node){              定义一个过滤器

   return node.tagName.toLowerCase()=="li"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP

}

var walker=document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,filter,false)

var node=walker.nextNode()

while(node!==null){

    alert(node.tagName)

    node=walker.nextNode()

}

不需要过滤器

var walker=document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false)

walker.firstChild()

walker.nextSibling()

var node=walker.firstChild()

while(node!==null){

    alert(node.tagName)

    node=walker.nextSibling

}

4范围

DOM中的范围可以选择文档中的一个区域，更加精确的操控文档，每个范围都由一个range类型表示，提供多种属性和方法

startContainer：包含范围的起点（选区中第一个节点中的父节点）；startOffset：范围在startContainer中的偏移量；

endContainer：包含范围终点的节点（选区中最后一个节点的父节点）;endOffset：范围在endContainer中终点的偏移量

4.1DOM范围实现简单选择

直接使用selectNode()，selectNodeContents()，

<p id="p1"><b>hello</b>world</p>

var range1=document.createRange()

var range2=document.createRange()

var p1=document.getElementById("p1")

range1.selectNode(p1)                这个范围包含p节点

range2.selectNodeContents(p1)        这个范围为p节点的子节点

4.2DOM范围实现复杂选择

<p id="p1"><b>hello</b> world</p>

var p1=document.getElementById("p1")

    helloNode=p1.firstChild.firstChild

    worldNode=p1.lastChild

var range=document.createRange()

    range.setStart(helloNode,2)         使用setStart(node,offset)  setEnd(node,offset),获取一段文本范围

    range.setEnd(worldNode,3)

range.deleteContents()                  删除范围对象

var fragment=range.extractContents()    删除范围对象，并返回删除的范围对象

p1.parentNode.appendChild(fragment1)

var fragment2=range.cloneContents()     复制范围对象

p1.parentNode.appendChild(fragment2)

4.3插入DOM范围中的内容

<span style="color:red">Inserted text</span>       效果:在范围内插入一个节点insertNode()

同上面

var span=document.createElement("span")

span.style.color="red"

span.appendChild(document.createTextNode("Inserted text"))

range.insertNode(span)

                                    突出效果

range.selectNode(helloNode)         提取范围中的内容

var span=document.createElement("span")

span.style.background="yellow"

range.surroundContents(span)        将文档片段内容添加到给定节点

4.4折叠DOM范围

range.collapse(true)     折叠到起点

alert(range.collapsed)

var p1=document.getElementById("p1")

var p2=document.getElementById("p2")

var range=document.createRange()

range.setStartAfter(p1)

range.setEndBefore(p2)

alert(range.collapsed)    输出true

4.5比较DOM范围，复制DOM范围，清楚DOM范围

compareBoundaryPoints()   比较范围

range.cloneRange()  复制范围

range.detach()  从文档中分离

range=null   解除引用

IE8就不写了，卒！

基础不牢，地动山摇

DOM拓展的更多相关文章

  1. javascript DOM拓展

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! DOM拓展 1选择符 API 1.1 querySelector() 由docu ...

  2. DOM拓展表格小练习

    涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...

  3. JS之BOM、客户端检测和DOM

    这是第八章到第十二章的内容,粗略浏览过一遍. 一.BOM 浏览器对象模型.包括了window.location.navigator.screen和history对象. window:核心对象 1.JS ...

  4. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

    × 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...

  5. h5容易遗忘的内容

    1.表单中 input类型 小补充: 2.常用的表单元素 3.表单属性 4.表单事件 5.多媒体:音频和视频 5.1音频 5.2视频 6.Dom拓展

  6. ex6的选择器

    前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...

  7. 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法

    前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...

  8. HTML5特性

    HTML5规范围绕如何使用新增标记定义了大量Javascript API,其中一些API与DOM重叠,定义了浏览器应该支持DOM拓展. 1.与类相关的扩充 HTML5新增了getElementsByC ...

  9. JS中的动态合集与静态合集

    JS的动态合集 前言 DOM是JavaScript重要组成部分,在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection ...

随机推荐

  1. Mac地址

    Mac地址是每张网卡的唯一标识符,也叫物理地址.硬件地址或链路地址,由网络设备制造商生产时烧在网卡的ROM中,可以修改.现在的Mac地址一般都采用6字节48bit(还有2字节16bit的Mac地址,多 ...

  2. 用python读写excel（xlrd、xlwt）

    最近需要从多个excel表里面用各种方式整理一些数据,虽然说原来用过java做这类事情,但是由于最近在学python,所以当然就决定用python尝试一下了.发现python果然简洁很多.这里简单记录 ...

  3. SQL2008游标

    最近让写一个自动生成数据的存储过程,其中会遍历表中数据并做出相应处理,因为数据量不算太大所以使用到了游标,初识游标遇到几个小问题,所以来和大家一起分享一下: 使用游标的五个步骤: 1.声明游标 语法: ...

  4. WCF初探-13：WCF客户端为双工服务创建回调对象

    前言: 在WCF初探-5:WCF消息交换模式之双工通讯(Duplex)博文中,我讲解了双工通信服务的一个应用场景,即订阅和发布模式,这一篇,我将通过一个消息发送的例子讲解一下WCF客户端如何为双工服务 ...

  5. dp - Codeforces Round &num;313 &lpar;Div&period; 1&rpar; C&period; Gerald and Giant Chess

    Gerald and Giant Chess Problem's Link: http://codeforces.com/contest/559/problem/C Mean: 一个n*m的网格,让你 ...

  6. iOS LLDB调试器和断点调试

    技巧一:运行时修改变量的值 你以前怎么验证是不是某个变量的值导致整段程序不能正常工作?修改代码中的变量的值,然后cmd+r重新启动app?现在你不需要这么做了,只需要设置一个断点,当程序在这进入调试模 ...

  7. Android 超仿Path时间轴和扇形菜单的效果

    网上看到的  ,仅此记录一下,用到的时候便于查找 效果如下: 源码下载地址 :  http://download.csdn.net/detail/abc13939746593/7251933

  8. ASP&period;net MVC基础

    简单了解了下MVC的基本开发步骤后,又对MVC的语法和模版详细看看了,小小总结下 对mvc开发,首先是要对布局有个基本的认识.Razor引擎使页面元素更加清晰 简单认识下 可以加载css和js等文件, ...

  9. Asp&period;net SignalR 初试和应用笔记一 认识和使用 SignalR

    如果你在用QQ,微信.你会知道,广告和消息无处不在.也有好的一面,比如通过QQ或微信,微博等及时聊天功能,你找到了你的初恋,你找到了小学的班级等等. 这里的及时通信在很多应用场所能用到,比如: 1.球 ...

  10. hdfs创建删除文件和文件夹

    在 hadoop 中,基于 Linux 命令可以给 hdfs 创建文件和文件夹,或者删除文件和文件夹 创建文件的命令为: hadoop fs -touch /file.txt 创建文件夹的命令为: h ...

相关文章