为了面试自己写的概要,参考文献:《javascript高级程序设计》

1、选择符API
*querySelector()
querySelector()接收一个css选择符,返回与选择符匹配的第一个元素,如果没有就返回null。
当用document调用它的时候,在所有的document元素中查找,
如果用元素调用这个方法,就会在元素所有后代元素中查找。
若果匹配到不合法的css选择符,就是报错。
*querySelectorAll()
querySelector()接收一个css选择符,与querySelectorAll()一样,它返回的是一个满足css选择符的NodeList,
同样,也可以用document和元素调用它,如果没有找到匹配的选择符,则返回一个空的NodeLIst,如果
css选择符不合法,则会抛出错误。
*matchesSelector()
matchesSelector()方法接收一个css选择符,它可以返回调用元素是否与该选择符匹配,所以
它的返回值是布尔类型,如果可以匹配则返回true,若果不匹配则返回false。
matchesSelector()一般可以用来检查所选元素能不能被querySelector()和querySelectorAll()返回,
但浏览器并不能很好的支持matchesSelector,IE9+可以支持msMatchesSelector(),
Firefox3.6+可以支持mozMatchesSelector,Chrome支持webkitMatchesSelector(),所以需要自己封装一个方法:

function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
}else if(element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
}else{
throw new Error("浏览器不支持");
}
}

2、javaScript中的节点属性
*节点属性:
nodeType 每个节点都有,返回值分别为1~12的的整数,代表不同的节点类型
parentNode 指向每个节点的父节点,只有一个。
childNodes 返回一个元素的所有子节点。
previousSibling 返回当前节点的上一个兄弟节点,如果当前节点是childNodes中的第一个节点,则返回null。
nextSibling 返回当前节点的下一个兄弟节点,如果当前节点是childNodes中的最后一个节点,则返回null。
*操作节点:
appendChild() 插入节点,并且被插入的节点作为父节点的最后一个子节点。即被插入节点的nextSibling为nulll;
insertBefore() 插入节点,但是insertBefore("","")接收两个参数,第一个参数是被插入的节点,第二个参数是参照节点,
执行完insertBefore后,被插入的节点将会作为参照的节点的上一个兄弟节点被插入(即previousSibling),
第二个参数也可以是null,这样就达到了和appendChild()相同的效果。
replaceChild() 替换节点,replaceChild()接收两个参数,第一个参数为要插入的节点,第二个参数为要替换的节点,
被替换的节点仍然存在于文档中,但却失去了在文档中的位置。
removeChild() 移除节点,removeChild()接收一个参数,就是被移除的节点,该方法的返回值为被移除的节点。被移除的节点
仍然存在于文档中,但是却失去了在文档中的位置。
*document节点
document存在的属性:
document.URL 取得当前页面完整的URL
document.domain 取得当前页面的域名
document.referrer 取得当前页面的来源页面地址,如果没有返回空字符串

3、HTML5中的自定义数据属性
HTML5中规定为元素添加非标准的属性时要加上前缀data-,目的是为元素提供与渲染无关的信息,或单纯是为了语义信息,可以随便添加
只要以data-开头即可。然后可以通过dataset来访问响应的值,并且用dataset取值的时候属性名没有了data-前缀,如果属性为data-myname
则只需要用 Selector.dataset.myname即可。

4、HTML5中插入标记的三种方式
*innerHTML
在读的模式下,innerHTML会返回调用它的元素的所有子节点的HTML代码。
在写的模式下,innerHTML接收一段html代码作为参数,会根据制定的参数创建新的DOM树,然后用新的DOM树替换原来的DOM树。
*outerHTMl
在读得模式下,outerHTML会返回包括调用它的元素和所有子节点的全部HTML标记。
在写的模式下,相当于根据参数创建新的DOM树,然后替换包括调用该方法在内的DOM树。
转换为代码就是:
div.outerHTML("<p>this is text</p>");
var p = document.createElement('p');
p.append(document.createTextNode('this is text'));
div.parentNode.replace(p,div);
*insertAdjacentHTML()方法
接收两个参数,第一个参数是要插入的位置,第二个参数是要插入的元素。
第一个参数为beforebegin,表示在当前元素前插入一个同辈元素。
第一个参数为afterbegin,

最新文章

  1. oracle常用的快捷键
  2. MySql 死锁时的一种解决办法
  3. jstack+top定位性能问题
  4. MongoDB学习笔记~批量插入方法的实现
  5. RabbitMQ 问题记录
  6. WinForm------TreeListLookUpEdit控件的使用
  7. PLSQL_性能优化系列15_Oracle Explain Plan解析计划解读
  8. ASP.NET验证控件二
  9. S2sh整合MAven项目所需坐标大全
  10. InnoDB与UUID
  11. Python 的格式化字符串format函数
  12. iOS真机调试——Certificates, Identifiers &Profiles 简介
  13. Next-Key Locks
  14. 用Gradle构建Spring Boot项目
  15. JAVA并发编程实战---第三章:对象的共享
  16. HMAC
  17. TCP多线程聊天室
  18. MySQL技术内幕读书笔记(三)——文件
  19. 「2017 山东一轮集训 Day5」距离
  20. Android DevArt6:Android中IPC的六种方式

热门文章

  1. 一个自带简易数据集的模拟线性分类器matlab代码——实验训练
  2. 关于OpenLDAPAdmin管理页面提示“This base cannot be created with PLA“问题. Strong Authentication Required问题
  3. NLP国内研究方向机构导师
  4. wifiphisher使用介绍
  5. OpenCV学习(35) OpenCV中的PCA算法
  6. js判断是否为手机访问
  7. 深入理解模型,视图和控制器(C#)
  8. 运用CSS改进网站设计的3个技巧
  9. HP Onboard Administrator 固件升级
  10. 机器视觉之 ICP算法和RANSAC算法