首页 > 代码库 > JavaScript03
JavaScript03
DOM(document object model )文档对象模型
节点:node
获取节点的方式:
直接方式:
通过元素的id属性获取(最常用)
alert(window.document.getElementById(‘uname‘).value);
通过元素的name属性获取
alert(document.getElementsByName(‘pwd‘)[0].value);
通过标签的名称来获取
var inputs = document.getElementsByTagName(‘input‘);
alert(inputs.length);
间接方式:
通过父元素获取子元素
var frm = document.getElementById(‘frm‘);
alert(frm.childNodes.length);
通过子元素获取父元素
var uname = document.getElementById(‘uname‘);
alert(uname.parentNode.method);
通过兄弟节点获取
alert(uname.nextSibling.value+"获取下一个兄弟节点");
alert(uname.previousSibling+"获取上一个兄弟节点");
节点类型:文本节点 , 属性节点,元素节点:nodeType=1
alert(uname.nodeType); // 元素节点:1
alert(uname.nextSibling.nodeType);//文本节点:3
alert(uname.value.nodeType);//属性节点:undefined
通过节点操作属性,样式,文本
固有属性:<input/> value name type
自定义属性:<input/> abc
function $(obj){
return document.getElementById(obj);
}
//attribute :属性
function testAttr(){
//获取元素对象
var uname = $(‘uname‘);
//alert(uname.value+"固有属性");
//alert(uname.abc+"自定义属性");
//alert(uname.getAttribute(‘abc‘));
uname.setAttribute(‘cat‘,‘xiaohua‘)
alert(uname.getAttribute(‘cat‘));
}
function testCss1(){
//获取div元素
var div = $(‘div1‘);
//1.修改其style属性
div.style.width ="300px";
div.style.height = "300px";
div.style.border = "1px solid red";
}
function testCss2(){
//2.修改其className
var div = $(‘div1‘);
div.className = "divCls1";
}
function testText(){
//获取div元素
var div = $(‘div1‘);
//innerHTML
//div.innerHTML = "<h1>今天天气真好!</h1>";
//innerText
div.innerText = "<h1>今天天气真好!</h1>";
}
通过节点操作文档结构
node
创建节点:document.createElement("标签名");
删除子节点:父节点对象.removeChild(子节点名称);
追加子节点:父节点对象.appendChlid(子节点名称);
通过节点操作表单以及表单项元素
JavaScript03