针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内。写这个主要是当个笔记加总结

存在的问题请大家多多指正!

DOM拓展

1选择符 API

1.1 querySelector()

由document调用,参数可以直接用css选择器的方式选择,选择成功返回选择到的第一个元素,选择失败则返回Null

var body = document.querySelector('body')
var myDiv = document.querySelector('#myDiv')
var selected = document.querySelector('.selected')
var img = document.querySelector('img.button')

1.2 querySelectorAll()

接受的参数是一样的,但是唯一不一样的事不仅仅接受一个元素,而是一个NodeList实例

NodeList总说,无非是拥有Item()方法,有length属性,还可以用[]来代替.item()。但是可能是经过了优化,在getElementByTagName上那种不一样,那种是实时显示的,这个NodeList实例类似一个快照,不会进行动态的查询。

1.3 matcheSelector()

这个方法通过element对象调用,参数是通过CSS选择器确定的另一个element对象,如果匹配,返回true,如果不匹配,返回false。

2.元素遍历

IE头铁,因为document对象调用childNodes的时候会忽略掉文本节点和注释,这回别人家为了弥补一下跟IE的差异,特别为dom加了五个属性

  • childElementCount:返回子元素的个数,不包括文本节点和注释
  • firstElementChild:指向一个元素;firstChild带上元素
  • lastElementChild:同理
  • previousElementSibling:同理
  • nextElementSilbling:同理

HTML5

HTML5带了一堆新的API,来瞅两眼。

3.1 与类相关的扩充

3.1.1getElementByClassName()

因为之前只有getElementById或者getElementByTagName,为了给类也整一个,所以就研究了一个getElementByClassName(),跟getElementByTagName没两样。参数是class,可以传入多个,用空格隔开,前后顺序无所谓。

例子:

var allCurrentUsernames = document.getElementsByClassNmae('username current')
var select = document.getElementById('myDiv').getElementByClassName('selected')

3.1.2 classList属性

之前操作类名:

var className  = div.className.split(/\s+/)

var pos = -1,
i,
len
for(i=0, len = classNames.length; i<len; i++){
if(className[i]=='user'){
pos = i
break
}
}

上炕都费劲,为了扭转这个尴尬的方法,所以HTML5加了一个新操作,就是给了element一系列属性

  • add(value)
  • contains(value)
  • remove(value):
  • toggle(value):切换操作,有了value把它删掉,没有value把他加上

上面那种操作简化一下:div.classList.remove('user')就完事了。

另外classLIst拥有item()方法

3.1.3 插入标记

1.innerHTML属性

innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记,也就是说你编辑器里里面有啥他都能给你返回来,但是调用的元素的标签不在。

通过设置innerHTML属性的值可以设置里面的内容,可以原封不动的访问。

但是也会一些问题,比如说script标签会被忽略,因为script在浏览器里没有显示,所以他是个没有作用域的元素。可以再前面加个input标签,然后把input隐藏.

div.innerHTML = '<input type = \"hidden\"><script>alert('laotie666'')</script>'

这样不影响布局也不会让script标签被干掉

2.outerHTML属性

跟上面的差不多,区别是innerHTML不包括对象的标签,只换对象内部的标签。

而outerHTML属性一换把外面自己的标签也给换掉了。例子就不举了

3.insertAdjacentHTML()

里面两个参数,第一个是要插入的方式,第二个是插入的东西,方式如下,字符串格式:

  • 'beforebegin':当前元素之前插一个同辈
  • 'afterbegin':当前元素之下插入一个新子元素或者在一个字元素之前插入新子元素(有点绕),就是有旧儿子插到旧儿子前头,没儿子就插进一个儿子
  • 'beforeend':没儿子插进一个儿子,有很多儿子在最后一个旧儿子后面插一个儿子
  • 'afterend':在当前元素之后插入一个同辈元素

4.专有拓展

4.1 children属性

ie最近这个children只带元素的子节点,除此之外和childNode没有啥区别

4.2 contains()方法

某个节点是不是摸个节点的后代,A.contains(b),若B是A的后代节点,则返回true

4.3 插入文本

因为原来有innerHTML和outerHTML已经被纳入规范了,所以还剩了个innerText和outerText,来讲一讲

4.3.1 innerText属性

和innerHTML就差在text不能加入HTML标签,firefox不给你用。

如果你有带HTML标签的节点的话可以利用这一点去除HTML标签,就是:

div.innerText = div.innerText

4.3.2outterText属性

类似,文本节点会把元素替换掉,剩下的元素会被文当删除

javascript DOM拓展的更多相关文章

  1. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  6. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  7. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  8. JavaScript DOM 编程艺术(第2版)读书笔记(1)

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  9. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

随机推荐

  1. django rest framework 过滤 lim分页

    一.过滤 1.首先引用diango 自带的过滤配置 2.导入模块 from django_filters.rest_framework import DjangoFilterBackend from ...

  2. Linux环境下sudo切换用户后执行其他命令

    https://blog.csdn.net/liangxw1/article/details/80106465

  3. python27期day05:字典、字典嵌套、作业题。

    1.字典是python中的数据类型之一.唯一一种大括号{}键值对的数据. 2.存储大量的数据.将数据和数据之间进行关联. 3.通过键可以准确的找到值 4.哈希:可变数据类型就不可哈希   不可变数据类 ...

  4. AutoResetEvent介绍及使用场景

    AutoResetEvent 允许线程通过发信号互相通信.通常,此通信涉及线程需要独占访问的资源. 线程通过调用 AutoResetEvent 上的 WaitOne 来等待信号.如果 AutoRese ...

  5. 洛谷1439:最长公共子序列(nlogn做法)

    洛谷1439:最长公共子序列(nlogn做法) 题目描述: 给定两个序列求最长公共子序列. 这两个序列一定是\(1\)~\(n\)的全排列. 数据范围: \(1\leq n\leq 10^5\) 思路 ...

  6. Cannot resolve reference to bean 'mongoTemplate' while setting bean property 'mongoOperations'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with na

    问题: Springboot 启动时出错,报没法创建bean的错误,看到nested最后是关于mongoTemplate的错误. 过程: 看网上大多说的是修改mongoTemplate的配置,但是sp ...

  7. java包学习之IO

    第一 java IO的专题 第二 编码 1.从桌面创建内容为“联”的txt,打开为乱码开始讲起,原因是我们的电脑默认是创建ansi编码的,但是“联”字比较特别,编码会被认为是utf-8的,所以会出现乱 ...

  8. iphone 移动端操作记录

    iPhone和Safari浏览器的后退按钮操作,是直接载入缓存中的页面,不会加载js文件,不会执行ready,onload函数,但是加载html页面会跑pageshow事件,因此有回退动作需要重新加载 ...

  9. 【操作系统之十四】iptables扩展模块

    1.iprange 使用iprange扩展模块可以指定"一段连续的IP地址范围",用于匹配报文的源地址或者目标地址.--src-range:匹配报文的源地址所在范围--dst-ra ...

  10. Hystrix(服务熔断,服务降级)

    一.Hystrix 1.服务雪崩 多个微服务之间调用的时候,假设微服务A调用微服务B和微服务C,微服务B和微服务C有调用其他的微服务,这就是所谓的”扇出”,如扇出的链路上某个微服务的调用响应式过长或者 ...