DOM 节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
获取元素节点
根据ID获取元素节点
document.getElementById(" ");
getElements***
的选择器返回的是一个NodeList对象,能根据引索号选择其中一个,可以遍历输出。
根据name获得元素节点
document,getElementsByName(" ");
根据HTML标签签名获取元素节点
document.getElementsByName( );
根据class获取元素节点
document.getElementsByClassName();
javascript中的css选择器
document.querySelector(); //根据css选择器的规则,返回第一个匹配到的元素
document.querySelectorAll();//根据css选择器的规则,返回所以匹配到的元素
<div id="div1">
<p id="p1" class="class1">
我是第一个P</p>
<p id="p2" class="class2">
我是第二个P</p>
</div>
window.onload = function () {
var node = document.querySelector("#div1 > p");
alert(node.innerHTML); //输出 我是第一个P
var node1 = document.querySelector(".class2");
alert(node1.innerHTML); //输出 我是第二个P
var nodelist = document.querySelectorAll("p");
alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML); //输出 我是第一个P - 我是第二个P
}
文档结构和遍历
(1)作为节点树的文档
1. parentNode 获取该节点的父节点
2. childNodes 获取该节点的子节点数组
3. firstChild 获取该节点的第一个子节点
4. lastChild 获取该节点的最后一个子节点
5. nextSibling 获取该节点的下一个兄弟元素
6. previoursSibling 获取该节点上的一个兄弟元素
7. nodeType 节点的类型
类型 | 值 | 说明 |
---|---|---|
ELEMENT_NODE | 1 | 元素节点 * |
ATTRIBUTE_NODE | 2 | 属性节点 * |
text_NODE | 3 | 文本节点 * |
CDATA_SECTION_NODE | 4 | CDATA 区段 |
ENTITY_REFERENCE_NODE | 5 | 实体引用 |
ENTITY_NODE | 6 | 实体 |
PROCESSING_INSTRUCTION_NODE | 7 | 处理指令 |
COMMENT_NODE | 8 | 注释节点 * |
DOCUMENT_NODE | 9 | 文档节点 * |
8. nodeVlue Text节点或Comment节点的文本内容。
9. nodeName 元素的标签名(如P,SPAN,#TEXT(文本节点),DIV),以大写形式表示
注意:以上6个方法元素节点也算一个节点。
<!DOCTYPE html>
<html>
<body><p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var txt="";
var c=document.body.childNodes;
for (i=0; i<c.length; i++)
{
txt=txt + c[i].nodeName + "<br>";
};
var x=document.getElementById("demo");
x.innerHTML=txt;
}
</script>
<p><b>注释:</b>元素中的空格被视为文本,而文本被视为节点。</p>
</body>
</html>
输出:
P
#text
BUTTON
#text
SCRIPT
#text
P
#text
注释:元素中的空格被视为文本,而文本被视为节点。
(2)作为元素树的文档
1. firstElementChild 第一个子元素节点
2. lastElementChild 最后一个子元素节点
3. nextElementSibling 下一个兄弟元素节点
4. previousElementSibling 前一个兄弟元素节点
5. childElementCount 子元素节点数量
注意,此五个方法文本节点不算进去
<div id="div1">
<p id="p1" class="class1">
我是第一个P</p>
<p id="p2" class="class2">
我是第二个P</p>
</div>
window.onload = function () {
var node = document.getElementById("div1");
var node1 = node.firstElementChild;
var node2 = node.lastElementChild;
alert(node.childElementCount); //输出2,div1一共有两个非文档子元素节点
alert(node1.innerHTML); //输出 我是第一个P
alert(node2.innerHTML); //输出 我是第二个P
alert(node2.previousElementSibling.innerHTML); //输出 我是第一个P(第二个元素节点的上一个非文本元素节点是P1)
alert(node1.nextElementSibling.innerHTML); //输出 我是第二个P(第一个元素节点的下一个兄弟非文本节点是P2)
}
属性获取与设置
javascript操作HTML属性
html标准属性
属性 | 值 | 描述 |
---|---|---|
accesskey | character | 规定访问元素的键盘快捷键 |
class | classname | 规定元素的类名(用于规定样式表中的类)。 |
contenteditable | true false | 规定是否允许用户编辑内容。 |
contextmenu | menu_id | 规定元素的上下文菜单。 |
data-yourvalue | value | 创作者定义的属性。HTML 文档的创作者可以定义他们自己的属性。必须以 “data-” 开头。 |
dir | ltr rtl | 规定元素中内容的文本方向。 |
draggable | true false auto | 规定是否允许用户拖动元素。 |
hidden | hidden | 规定该元素是无关的。被隐藏的元素不会显示。 |
id | id | 规定元素的唯一 ID。 |
item | empty url | 用于组合元素。 |
itemprop | url group value | 用于组合项目。 |
lang | language_code | 规定元素中内容的语言代码。语言代码参考手册。 |
spellcheck | true false | 规定是否必须对元素进行拼写或语法检查。 |
style | style_definition | 规定元素的行内样式。 |
subject | id | 规定元素对应的项目。 |
tabindex | number | 规定元素的 tab 键控制次序。 |
title | text | 规定有关元素的额外信息。 |
属性的读取
,【节点.属性;】此处要注意的是,某些HTML属性名称在javascript之中是保留字,因此会有些许不同,如class,lable中的for在javascript中变为htmlFor,className.<div id="div1"> <p id="p1" class="class1"> 我是第一个P</p> <img src="123.jpg" alt="我是一张图片" id="img1" /> <input type="text" value="我是一个文本框" id="input1" /> </div> window.onload = function () { var nodeText = document.getElementById("input1"); alert(nodeText.value); //输出 我是一个文本框 var nodeImg = document.getElementById("img1"); alert(nodeImg.alt); //输出 我是一张图片 var nodeP = document.getElementById("p1"); alert(nodeP.className); //输出 class1 注意获取class是className,如果写成nodeP.class则输出undefined
属性的设置
,【节点.属性=”“;】此处同样要注意的事保留字<div id="div1"> <img src="1big.jpg" alt="我是一张图片" id="img1" onclick="fun1()" /> </div> function fun1() { document.getElementById("img1").src = "1small.jpg"; //改变图片的路径属性。实现的效果为,当点击图片时,大图变小图。 }
非标准HTML
属性getAtrribute();
setAttribute();
//注意这两个方法是不必理会javascript保留字的,HTML属性是什么就怎么写。
<div id="div1">
<img src="1big.jpg" alt="我是一张图片" class="imgClass" id="img1" onclick="fun1()" />
</div>
function fun1() {
document.getElementById("img1").setAttribute("src", "1small.jpg");
alert(document.getElementById("img1").getAttribute("class"));
}
Attr节点的属性获取
attributes属性 非Element对象返回null,Element一半返回Attr对象。Attr对象是一个特殊的Node,通过name与value获取属性名称与值。
如:document.getElementById(“img1”)[0];
document.getElementById(“img1”).src;<div id="div1"> <img src="1big.jpg" alt="我是一张图片" class="imgClass" id="img1" onclick="fun1()" /> </div> function fun1() { alert(document.getElementById("img1").attributes[0].name); //输出 onclick 注意,通过索引器访问是写在右面在排前面,从0开始 alert(document.getElementById("img1").attributes.src.value); //输出1big.jpg document.getElementById("img1").attributes.src.value = "1small.jpg"; //点击后改变src属性,实现了点击大图变小图效果 }
javascript操作元素css
通过元素的style属性可以随意读取和设置元素的CSS样式,例子:
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
alert(document.getElementById("div1").style.backgroundColor);
document.getElementById("div1").style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<div id="div1" style="width:100px; height:100px; background-color:red"></div>
</body>
设置和获取元素节点的内容
元素的内容
1. innerText
、textContent
innerText与textContent的区别,当文本为空时,innerText是”“,而textContent是undefined
2. innerHTML
innerHTML与innerText的区别,就是对HTML代码的输出方式Text不会输出HTML代码
<div id="div1">
<p id="p1">我是第一个P</p>
<p id="p2">我是第<b>二</b>个P</p>
</div>
window.onload = function () {
alert(document.getElementById("p1").innerText); //注意火狐浏览器不支持innerText
alert(document.getElementById("p1").textContent); //基本都支持textContent
document.getElementById("p1").textContent = "我是p1,javascript改变了我"; //设置文档Text
alert(document.getElementById("p2").textContent);
alert(document.getElementById("p2").innerHTML); //innerHTML与innerText的区别,就是对HTML代码的输出方式Text不会输出HTML代码
}
创建,插入,删除节点
创建文本节点
document.createTextNode();
<div id="div1">
<p id="p1">我是第一个P</p>
<p id="p2">我是第二个P</p>
</div>
window.onload = function () {
var textNode = document.createTextNode("<p>我是一个javascript新建的节点</p>");
document.getElementById("div1").appendChild(textNode);
}
完成后HTML变为:
< div id="div1">
<p id="p1">我是第一个P</p>
<p id="p2">我是第二个P</p>
我是一个javascript新建的节点
</div>
创建元素节点
document.createElement()
<div id="div1">
<p id="p1">我是第一个P</p>
<p id="p2">我是第二个P</p>
</div>
window.onload = function () {
var pNode = document.createElement("p");
pNode.textContent = "新建一个P节点";
document.getElementById("div1").appendChild(pNode);
}
执行之后HTML代码变为:
<div id="div1">
<p id="p1">我是第一个P</p>
<p id="p2">我是第二个P</p>
<p>新建一个P节点</p>
</div>
插入节点
appendChild();
//将一个节点插入到调用节点的最后面
insertBefore();
//接受两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,则跟appendChild一样,放在最后。
<div id="div1">
<p id="p1">我是第一个P</p>
</div>
window.onload = function () {
var pNode1 = document.createElement("p");
pNode1.textContent = "insertBefore插入的节点";
var pNode2 = document.createElement("p");
pNode2.textContent = "appendChild插入的节点";
document.getElementById("div1").appendChild(pNode2);
document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1"));
}
执行之后HTML代码为:
<div id="div1">
<p>insertBefore插入的节点</p>
<p id="p1">我是第一个P</p>
<p>appendChild插入的节点</p>
</div>
注意:
插入的是已存在的节点,也可以称之为移动。
删除和替换节点
removeChild();
由父元素调用,删除一个子节点。注意是直接父元素调用,删除直接子元素才有效,删除孙子元素就没有效果了。
<div id="div1">
<p id="p1">我是第一个P</p>
<p id="p2">我是第二个P</p>
</div>
window.onload = function () {
var div1 = document.getElementById("div1");
div1.removeChild(document.getElementById("p2"));
}
执行之后代码变为:
<div id="div1">
<p id="p1">我是第一个P</p> //注意到第二个P元素已经被移除了
</div>
replaceChild()
//删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点
<div id="div1">
<p id="p1">我是第一个P</p>
<p id="p2">我是第二个P</p>
</div>
window.onload = function () {
var div1 = document.getElementById("div1");
var span1 = document.createElement("span");
span1.textContent = "我是一个新建的span";
div1.replaceChild(span1,document.getElementById("p2"));
}
执行完成后HTML代码变为:
<div id="div1">
<p id="p1">我是第一个P</p>
<span>我是一个新建的span</span> //留意到p2节点已经被替换为span1节点了
</div>
Document对象集合
@(Document对象)
集合 | 描述 |
---|---|
all[] | 提供对文档中所有 HTML 元素的访问。 |
anchors[] | 返回对文档中所有 Anchor 对象的引用。 |
applets | 返回对文档中所有 Applet 对象的引用。 |
forms[] | 返回对文档中所有 Form 对象引用。 |
images[] | 返回对文档中所有 Image 对象引用。 |
links[] | 返回对文档中所有 Area 和 Link 对象引用。 |
all[]
- 语法
document.all[i]
document.all[name]
document.all.tags[tagname]
- 说明
all[] 是一个多功能的类似数组的对象,它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。
all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此,这个 all[] 数组在已有的代码中仍然使用。
all[] 包含的元素保持了最初的顺序,如果你知道它们在数组中的确切数字化位置,可以直接从数组中提取它们。然而,更为常见的是使用 all[] 数组,根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name,将得到共享同一名称的元素的一个数组。
forms[]
- 语法
document.forms[]
<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script type="text/javascript">
document.write("This document contains: ")
document.write(document.forms.length + " forms.")
</script>
</body>
</html>