DOM操作
节点类型
<p title="remark">备注</p>
节点分为三个类型
· 元素节点 如上述html中的p标签
· 属性节点 如上述html中的title属性,元素节点的属性
· 文本节点 如上述html中的 备注,元素节点的子节点
文档加载顺序
html的文档是按照顺序进行加载的,如果将js写在<head>中,获取<body>中节点时会获取不到,使用两种方式来解决这种情况
第一种方式:在<html>之后编写<script>
第二种方式:在<script>中使用window.onload来加载html文档,加载完之后再去获取html中的元素节点就可以获取到
获取节点
获取元素节点
获取id为content的节点,html中需要确保id值唯一
window.onload = function(){
var content = document.getElementById("content");
}
获取li节点,使用标签名获取节点的集合
var liNodes = document.getElementsByTagName("li");
属于node的方法,可以使用任何节点来调用该方法
var content = document.getElementById("content");
var liNodes = content.getElementsByTagName("li");
根据元素的name属性获取指定的节点集合
var genders = document.getElementsByName("gender");
操作属性节点
通过元素节点 . 的当时来获取和设置
// 获取元素节点var nameNode = document.getElementById("name");// 读取属性的值
var value = nameNode.value;// 设置指定的属性值
nameNode.value = "你好";
获取元素节点的子节点
window.onload = function () {
// 获取city节点
var city = document.getElementById("city");
// 获取city节点的所有li子节点
var cityLiNode = city.getElementsByTagName("li");
alert(cityLiNode.length);
}
节点的属性
所有的节点都包含有nodeType、nodeName、nodeValue
// 元素节点
var elementNode = document.getElementById("bj");
alert(elementNode.nodeType); // 元素节点:1
alert(elementNode.nodeName); // 节点名:li
alert(elementNode.nodeValue); // 元素节点没有nodeValue属性值:null
// 属性节点
var attributeNode = elementNode.getAttributeNode("name");
alert(attributeNode.nodeType); //属性节点:2
alert(attributeNode.nodeName); // 属性节点的节点名:属性名
alert(attributeNode.nodeValue); // 属性节点的nodeValue属性值 : 属性值
// 文本节点var textNode = elementNode.firstChild;
alert(textNode.nodeType); //文本节点:3
alert(textNode.nodeName); // 文本节点的nodeName:#text
alert(textNode.nodeValue); // 属性节点的nodeValue :文本值
创建节点
// 新创建一个元素节点window.onload = function () {
// 创建li元素节点
var liNode = document.createElement("li");
// 获取需要加入li节点的父节点
var cityNode = document.getElementById("city");
// 将li元素节点添加到父节点中
cityNode.appendChild(liNode);
// 创建一个文本节点
var textNode = document.createTextNode("香港");
// 将文本节点放入li元素节点中
liNode.appendChild(textNode);
}
删除节点
window.onload = function () {
var cityNode = document.getElementById("city");
// 删除子节点
cityNode.parentNode.removeChild(cityNode);
}
标签: JavaScript
还木有评论哦,快来抢沙发吧~