JavaScript-DOM2(内容整理)
这两天新的知识有点多有点杂一时半会没有整理过来,以后不出意外会一直更行。
js节点类型(NODETYPE)
查看节点类型 nodetype属性,返回的结果会根据对象节点的不同返回不同的值。
文档节点(document) 返回值9为对应的常量
Node.document_node
元素节点 (element)返回值1为对应常量
Node.ELEMENT_NODE
- 属性节点(attr) 返回值2为对应常量
Node.ATTRIBUTE_NODE
文本节点(text) 返回值3为对应常量
Node.TEXT_NODE
文档片断节点(documentFragment)返回值11为对应常量
Node.DOCUMENT_FRAGMENT_NODE
- 文档类型节点 返回值10为对应常量
+ 注释节点(comment)返回值8为对应常量。
##选区文档内容
DOM里存在着许多选区或者查询一个或多个元素的方法
+ 用指定的id属性
+ 用指定的标签名
+ 用指定的css类
+ 用指定的name属性
+ 匹配指定的css选择器
##DOM通过id选区元素
之前我们用的document.getElementById()这个方法,可以可以准确的通过id找到元素,但实际上来说它其实是属于dom。
demo:
var btn = document.getElementById("btn");
````
当然也可以通过id选择一组元素。
/函数里面的是正则/
function getElements(/*ids*/) {
var elements = {};
for(var i=0;i<arguments.length;i++){
var id = arguments[i]; //此时arguments为复数
var elt = document.getElementById(id); //通过id获取了元素
if(elt === null) { //判断elt是否为空
throw new Error("No element with id:" + id);
//判断条件成立时控制台发出错误
}
elements[id] = elt;
}
return elements;
}
DOM通过标签名获取元素
getElementsByTagName()方法可以用来选取指定类型的(标签名)所有的HTML元素或者XML元素。
//此时之所以要加【0】是应为标签选择器选择的不是一个可以直接使用的量
var test = document.getElementsByTagName(‘p’)[0];
Tip:html标签不区分大小写,在html文档中使用getElementsByTagName()时,将进行不区分大小写的标签名比较。
Tip:给getElementsByTagName()传递通配符*,将获得页面中的所有的元素。
如果要获取一个元素内的子元素可以看一下demo:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<span>hello</span>
</div>
</body>
<script>
//根据元素的标签名选中了元素
var div = document.getElementsByTagName('div');
var span = div.getElementsByTagName('span');
</script>
</html>
DOM制定css类名选择元素
使用方式和id类似,但是应为类选择器选择的属性不唯一,所以getelement后面加个s表示附属,因为是复数,所以选取的元素也不是一个可以直接使用的量。
demo:
var one = document.getElementsByClassName(‘class值’);
使用案例
demo:
<script>
var div = document.getElementsByClassName('d1 no'); // 选中class类名中包含d1 和no的标签
var no = document.getElementsByClassName('no');// 匹配了class类名中带有no的标签
</script>
这个方法只能够使用一个字符串参数,但是这个字符串参数可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才能匹配,但是顺序无关紧要。
DOM通过name属性来选取元素
html中也可以通过name来选区元素,但是html中并不是每个元素都拥有name属性的,这其中包括表单,表单元素,iframe 和 img元素。,在表单数据提交到服务器的时候使用改属性的值,类似与id。但是和id的区别是,name属性的值不是必须唯一的,多个元素可以存在相同的name值,类似于input标签里的checkbox多选标签radios单选标签
使用方法:
var input = document.getElementsByName('username');
DOM通过css选择器选取元素
学习了c3选择器以后,在js中我们也可以根据选择器来选取元素,随着c3选择器的标准化,w3c制定了另一个被称为“选择器API”的方法,来获取匹配一个给定选择器的元素方法quertSelectorAll.
该方法接受一个字符串参数,这个参数包含一个css选择器,返回一个表示文档中匹配选择器的所有元素的nodelist对象(说白了就是把所有符合你要求的对象以列表的形式给你展现出来);
需要注意的是,这个方法返回的对象的内容并不是实时的:包含在调用的时刻选择器所匹配的元素,但是并不包含在调用之后匹配的元素。如果没有匹配的元素,将返回一个空的对象。如果选择器异常,将抛出一个异常。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script>
var div = document.querySelectorAll('div');
console.log(div);
</script>
</html>
querySelector()
这个方法与上面类似,只是这个选择器只返回第一个匹配的元素,按照文档顺序返回,如果没有匹配就返回null。
var div = document.querySelector('div');
console.log(div);
Tip:在css3中,新增了两个选择器::first-line 和 :first-letter 等伪元素。这种伪元素实际上匹配的文本节点的一部分,而不是实际的元素。那么当我们使用以上的两种方法的时候,就不会匹配成功。
而且,在很多的浏览器中拒绝返回:link 和:visited等伪类的匹配结果,认为这样会泄露用户的浏览信息。
文档结构和遍历
一旦选取了文档中的一个元素,有时我们需要查找文档中与之在结构上相关的部分(父亲,兄弟,子女)。针对此种问题,js给了我们两个API使用,节点对象树API 和 元素对象树API。
节点对象树API(作为节点树的文档)
Node定义的重要属性:
- parentNode 找到节点的父节点;
childNodes 该节点的子节点
firstChild lastChild 该节点中的子节点的第一个或者最后一个
nextSibling previoursSibling 该节点的兄弟节点的前一个和下一个
nodeValue text节点或者Comment节点的文本内容
nodeName 元素的标签名,以大写的形式显示。
tip:以上的API对文档文本非常敏感,回车空格注释都算在内。元素对象树API -- 作为元素树的文档
这个API所提供的方法会将文档看做Element文档树,会忽略掉Text和Comment节点。(简单点讲就是忽略文本和注释的节点)。- 第一部分
children 属性 子属性 第二部分
children 属性 元素属性elememt属性详解:
firstElementChild lastElementChild
nextElementSibling perviousElementSibling
childElementCount 子元素的数量,返回值和childred.length相等