首页 > 技术文章 > 自己总结的javascript基础知识

Echoer 2015-08-15 12:46 原文

为了面试自己写的概要,参考文献:《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,

推荐阅读