目录
DOM
DOM:Document Object Model( 文档对象模型)
访问节点
- 使用 getElement系列方法访问指定节点
- getElementById()、getElementsByName()、getElementsByTagName()
- 根据层次关系访问节点
- 节点属性
属性名称 | 描述 |
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
- elemen 属性
属性名称 | 描述 |
firstElementChild | 返回节点的第一个子节点 最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
节点信息
- nodeName:节点名称
- nodeValue:节点值
- nodeType:节点类型
操作节点
- 操作节点的属性
- getAttribute("属性名")
- setAttribute("属性名","属性值")
- 创建和插入节点
名称 | 描述 |
createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild( B) | 把B节点追加至A节点的末尾 |
insertBefore( A,B ) | 把A节点插入到B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
- 删除和替换节点
名称 | 描述 |
removeChild( node) | 删除指定的节点 |
replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
- 操作节点样式
- 改变样式的属性:style属性、className属性
- style属性
HTML元素.style.样式属性="值"
名称 | 描述 |
onclick | 当用户单击某个对象时调用事件 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousedown | 鼠标按钮被按下 |
- className属性
HTML元素.className="样式名称"
- 获取元素的样式
HTML元素.style.样式属性;
eg:
用户名:<input type="text" id="uname" />
<br />
性别:<input type="radio" name="sex" checked="checked" value="1" />男
<input type="radio" name="sex" value="2" />女
<br />
爱好:
<input type="checkbox" name="loves" value="0" />唱
<input type="checkbox" name="loves" value="1" />跳
<input type="checkbox" name="loves" value="2" />rap
<br />
国家:
<select id="city">
<option value="0">请选择</option>
<option value="1001">中国</option>
<option value="1002">日本</option>
<option value="1003">美国</option>
</select>
<span id="city_err"></span>
<br />
备注:
<textarea id="bz" placeholder="请输入备注">xxx</textarea>
<br />
<button onclick="loginSubmit()">提交</button>
<button onclick="defaultValue()">默认值</button>
script:
<script type="text/javascript">
function loginSubmit() {
var uname = document.getElementById("uname");
uname.value = "哈哈哈";
// 获得文本域的值;
var bz = document.getElementById("bz");
alert(bz.value);
// 获取下拉框的值;
var city = document.getElementById("city");
if (city.value == 0) {
document.getElementById("city_err").innerHTML = "请选择国家";
} else {
document.getElementById("city_err").innerHTML = "";
}
// 获得复选框中的值;
var loves = document.getElementsByName("loves");
var arrLoves = new Array();
for (var i = 0; i < loves.length; i++) {
if (loves[i].checked) {
arrLoves.push(loves[i].value);
}
}
if (arrLoves.length == "") {
arrLoves.push("爱好不能为空!");
}
alert(arrLoves.join(","));
// 获得单选框中的值;
var sexs = document.getElementsByName("sex");
var sex;
for (var i = 0; i < sexs.length; i++) {
if (sexs[i].checked) {
sex = sexs[i].value;
}
}
}
</script>