js document
程序员文章站
2022-03-19 09:48:33
...
document对象学习:
1、document对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息。
2、使用document
获取HTML元素对象
直接获取方式:
通过id
通过name属性值
通过标签名
通过class属性值
间接获取方式:
父子关系
子父关系
兄弟关系
//id方式
function testGetEleById(){
var inp=window.document.getElementById("uname");
alert(inp);
}
//name方式
function testGetEleByName(){
var favs=document.getElementsByName("fav");
alert(favs);
}
//标签名
function testGetEleByTagName(){
var inps=document.getElementsByTagName("input");
alert(inps);
}
//class属性
function testGetEleByClassName(){
var inps=document.getElementsByClassName("common");
alert(inps.length);
}
//间接获取方式
//父子关系
function testParent(){
//获取父级元素对象
var showdiv=document.getElementById("showdiv");
//获取所有的子元素对象数组
var childs=showdiv.childNodes;
alert(childs.length);
}
//子父关系
function testChild(){
//获取子元素对象
var inp=document.getElementById("inp");
var div=inp.parentNode;
alert(div);
}
//兄弟关系
function testBrother(){
var inp=document.getElementById("inp");
var preEle= inp.previousSibling;//弟获取兄
var nextEle=inp.nextSibling;//兄获取弟
alert(preEle+":::"+nextEle);
}
用户名:
唱歌 跳舞 睡觉 打游戏
间接获取方式学习: