DOM基础方法

Posted 2020-08-21

//查找元素
//DOM操作要等html文档全部加载完成，才能获取
//解决方法一，script文件调用放在文档最后面
//解决方法二onload事件解决加载
/*
window.onload=function () {
    var box = document.getElementById("box");
    alert(box);
}
 window.onload = function () {
 var box = document.getElementById("box");
 alert(box.tagName);  //获取这个元素几点的标签名
 alert(box.innerHTML);//获取节点里面的文本内容

 }
 window.onload = function () {
 var box = document.getElementById("box");
 alert(box.tagName);  //获取这个元素几点的标签名
 alert(box.innerHTML);//获取节点里面的文本内容
 alert(box.id);
 alert(box.title);
 alert(box.style.color);
 alert(box.className);
 }

 window.onload=function () {
 var box = document.getElementById("box");
 //alert(box.innerHTML);//获取当前元素节点的文本内容
 }


 */

/*
//getElementsByTagName 方法
window.onload=function () {
    var li = document.getElementsByTagName("li");
    alert(li[0].tagName);
    alert(li[0].innerHTML);
}


//获取body节点对象

window.onload=function () {
    var body = document.getElementsByTagName("body")[0];
    alert(body);
}


//*获取所有节点数
window.onload=function () {
    var all = document.getElementsByTagName("*");
    alert(all.length);
}

*/

//getElementsByName方法,一般用于input标签
window.onload=function () {
    var input = document.getElementsByName("test")[0];
    alert(input.value);
}


//自定义属性获取方法getAttribute,尽量不使用，因为容易产生不兼容
window.onload=function () {
    var box = document.getElementsByName("box");
    alert(box.getAttribute("bbb"));
}

//setAttribute方法
window.onload= function () {
    var box = document.getElementById("box");
    box.setAttribute("align","center");
}