书接上回
节点
DOM中有许多不同类型的节点。接下来我们先看看其中的三种:元素节点,文本节点和属性节点。
元素节点:指该html里面标签的名字就是元素的名字。例如 我们使用的<P>
,·<ul>
和<div>
之类的元素,p标签的名字是"p",无序列表的名字就是"ul"。
文本节点:元素节点是结构,文本节点则是内容。例如: <p>
里面包含的文本"HOOOOOO",它就是一个文本节点。
属性节点:属性节点对元素做出更具体的描述。(指该元素的属性)
例如:<p title="a">111111</p>
在DOM中,title…就是一个属性节点。
获取元素(查询元素)结合
- 不需要查找就可直接获得的元素: 4种
(1). document对象: document —— 代表整个网页所有内容
(2). 元素对象: document.documentElement
(3). 元素对象: document.head
(4). 元素对象: document.body
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html元素对象</title>
</head>
<body>
<span id="aaaa">Hello</span>
<script>
/想输出document对象
console.log(document);
//想输出html元素对象
console.log(document.documentElement);
//想输出head元素对象
console.log(document.head);
//想输出body元素对象
console.log(document.body);
</script>
</body>
2.DOM方法可获取 元素节点
通过元素ID: getElementById(JavaScript语言区分字母大小写,千万不能写错了,或者大小写写错)
它是document对象特有的类型。在代码中,函数名的后面必须跟有一对圆括号,这对圆括号包含着函数的参数。getElementById方法中只有一个参数:
document.getElementById(“id名”)
var 一个元素对象=document.getElementById(“id名”)
这个id值必须放在单引号或双引号里
必须用document.作为开头
所有元素不查找,是不能直接使用!
要想使用某个元素,都必须先查找再使用
想查找ul下的所有li
如果网页中确实有多个相同的id,则getElementById()永远只能找第一个符合条件的。
<!DOCTYPE HTML>
<html>
<head>
<title>遍历节点树</title>
<meta charset="utf-8"/>
</head>
<body>
<ul id="nav">
<li>小说</li>
<li>漫画</li>
<li>影视</li>
</ul>
<script>
var ul=document.getElementById("nav");
console.log(ul);
//获取id为nav的ul节点
//如果找到符合条件的一个元素,就返回一个元素对象
//如果没找到符合条件的元素,就返回null
</script>
</body>
</html>
通过标签名字: getElementsByTagName
该方法返回一个对象数组,每个对象分别对应着文档里面有着给定标签的一个元素。这个方法他的参数是标签的名字。在指定父元素下以标签名为查找条件获取多个元素
var 类数组对象=任意父元素.getElementsByTagName(“标签名”)
document.getElementsByTagName(“标签名”)
i. 如果找到符合条件的多个元素,则多个元素放在一个类数组对象中返回
ii. 如果找不到符合条件的元素,则返回空类数组对象: { length:0 }
i. 不一定必须用document作为开头。可以用任意父元素作为开头!仅在当前父元素下查找符合条件的元素。
限制查找范围,提高查找效率
因为可能返回多个符合要求的子元素,所以方法名中Elements是s结尾,复数形式。
不但查找直接子元素,而且在所有后代中查找符合要求的元素
<!DOCTYPE HTML>
<html>
<head>
<title>遍历节点树</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>qwer</h1>
<p style="color: #DCDCDC">ewqweqr</p>
<ul id="purchases">
<li>1</li>
<li class="li2">2</li>
<li class="li3 ads">3</li>
</ul>
<script>
alert(document.getElementsByTagName("li").length);
//实例中列表项元素有3个,长度就是3
var items = document.getElementsByTagName("li");
console.log(items);
获得li节点和li的属性....
</script>
</body>
</html>
通过标签的class属性中的类名来访问元素:getElementsByClassName
var 类数组对象=任意父元素.getElementsByClassName(“class名”)
document.getElementsByClassName(class名)
只能接受一个参数,就是类名
果找到符合条件的多个元素,则多个元素放在一个类数组对象中返回
如果找不到符合条件的元素,则返回空类数组对象: { length:0 }
可以用任意父元素作为开头!仅在当前父元素下查找符合条件的元素。
限制查找范围,提高查找效率
方法名中Elements是s结尾,复数形式。
在所有后代中查找符合要求的元素
如果只找到一个元素,也必须加[0],才能取出这唯一的DOM元素对象
例:var 类数组对象=任意父元素.getElementsByClassName(“class名”)[0];
如果一个元素上同时被多个class修饰,那么只用其中一个class名就可找到该元素。
<!DOCTYPE HTML>
<html>
<head>
<title>遍历节点树</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>qwer</h1>
<p style="color: #DCDCDC">2020</p>
<ul id="purchases">
<li>1</li>
<li class="l1">2</li>
<li class="l1">3</li>
</ul>
<script>
alert(document.getElementsByClassName("l1").length);
//只要有一个元素带有l1,就有一个元素匹配
var items = document.getElementsByClassName("l1");
console.log(items);
//获取class名为l1的节点...
</script>
</body>
</html>
通过标签的name属性查找多个表单元素: getElementsByName
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性。
var 类数组对象=document.getElementsByName(“name名”)
document.getElementsByName(“name名”)
因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
如果找不到符合条件的元素,则返回空类数组对象: { length:0 }
必须用document.作为开头!不能以任意父元素开头!
必须用document.作为开头!不能以任意父元素开头!
必须用document.作为开头!不能以任意父元素开头!
方法名中Elements是s结尾,复数形式。
如果只找到一个元素,也必须加[0],才能取出这唯一的DOM元素对象
<!DOCTYPE HTML>
<html>
<head>
<title>遍历节点树</title>
<meta charset="utf-8"/>
</head>
<body>
用户名: <input type="text" name="uname"><br/>
性别:
<label>
<input type="radio" name="sex" value="1">男
</label>
<label>
<input type="radio" name="sex" value="0">女
</label>
<script>
//想查找name为sex的两个元素
var radios=document.getElementsByName("sex");
console.log(radios); //....
//想查找name为uname的一个文本框
var txtUname=document.getElementsByName("uname")[0];
console.log(txtUname); //...
</script>
</body>
</html>
3. 利用节点树查找节点:
获得一个DOM元素,想找它周围附近的其它DOM元素时,就用按节点间关系查找
但是因为节点树认为连看不见的换行和空格,也是文本类型的节点对象。也会成为子节点和兄弟节点。所以它会严重干扰我们的查找结果。
对此的解决方法就是换成元素节点查询。一般分别成为节点树和元素树。
a. 节点树: 包含所有节点对象(元素、文本等)的完整树结构
b. 元素树: 仅包含元素节点,不包含文本等其他类型节点的简化版树结构
通过节点树
按照父子关系(上一级和下一级):
获得一个节点对象的父节点: document.节点对象.parentNode;
获得一个节点对象下的所有直接子节点对象: document.节点对象.childNodes;
获得一个节点对象下的第一个直接子节点: document.节点对象.firstChild;
获得一个节点对象下的最后一个直接子节点: document.节点对象.lastChild;
兄弟关系: 2个属性:
获得当前节点对象相邻的前一个兄弟节点: 节点对象.previousSibling
获得当前节点对象相邻的下一个兄弟节点: 节点对象.nextSibling
<!DOCTYPE HTML>
<html>
<head>
<title>DOM Tree</title>
<meta charset="utf-8" />
</head>
<body>
<span id="s1">Hello</span>
<h1>标题一</h1>
<script>
var childNodes=document.body.childNodes;
console.log(childNodes);
var span=document.body.firstChild;
console.log(span);
var script=document.body.lastChild;
console.log(script);
var h1=document.body.children[1];
console.log(h1);
var h1=span.nextSibling;
console.log(h1);
var h1=script.previousSibling;
console.log(h1);
</script>
</body>
对于元素间的空格,也会导致了在使用childNodes和firstChild等属性时的行为不一致。
**
所以按节点间关系查找时,都用元素树,而不用节点树
**
通过元素树
强调:元素树只是节点树中的部分元素节点的一个子集。
父子元素:
获得一个元素对象的父元素: 元素对象.parentElement
获得一个元素对象下的所有直接子元素: 元素对象.children
因为一个元素可能包含多个子元素,所以children属性返回一个类数组对象,其中包含找到的所有直接子元素对象。下标从0开始!
获得一个元素对象下的第一个直接子元素: 元素对象.firstElementChild
获得一个元素对象下的最后一个直接子元素: 元素对象.lastElementChild
兄弟关系: 2个属性:
获得当前元素对象相邻的前一个兄弟元素: 元素对象.previousElementSibling
获得当前元素对象相邻的下一个兄弟元素: 元素对象.nextElementSibling
结合本例子学习
<!DOCTYPE HTML>
<html>
<head>
<title>DOM Tree</title>
<meta charset="utf-8" />
</head>
<body>
<span id="sp">CSDN</span>
<h1>JavaScript DOM</h1>
<script>
//想获得body的父节点: 应该是<html>
//既可以用parentNode,又可以用parentElement
var html=document.body.parentNode;//首选
//var html=document.body.parentElement;
// 如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A。
console.log(html);
//想获得body下的所有直接子元素: 应该是3个 span h1 script
//错误做法:
//var childNodes=document.body.childNodes;
//console.log(childNodes);//7个 原因:元素中的空格被视为文本,而文本被视为节点。
//正确做法:
var children=document.body.children;
console.log(children);//3个
//想获得body下的第一个直接子元素: 应该是span
//错误做法:
//var span=document.body.firstChild;
//正确做法:
var span=document.body.firstElementChild;
console.log(span);
//想实现body中最后一个直接子元素: 应该是script
var script=document.body.lastElementChild;
console.log(script);
//想获得body中第二个孩子:应该是h1
var h1=document.body.children[1]; //从零开始 0,1,2,3
console.log(h1);
//想获得h1,还可以通过span的下一个兄弟元素获得
var h1=span.nextElementSibling;
console.log(h1);
//想获得h1,还可以通过script的前一个兄弟元素获得
var h1=script.previousElementSibling;
console.log(h1);
</script>
</body>
**4. 按选择器查找: **
如果元素藏的很深,查找条件很复杂时,都要选择按选择器查找
(1). 只查找一个符合条件的元素:
var 一个元素对象=任意父元素.querySelector("任意选择器");
(2). 查找多个符合条件的元素:
var 类数组对象=任意父元素.querySelectorAll("任意选择器");