认识DOM:
普通html代码:
分解为DOM节点层次图:
节点可能分常见三种: 1元素节点(html body head p 及标签 ) 2 文本节点 (li与li之间的文字 用户展示内容)3属性节点(a标签中的href)
例:
获取元素
1、 标签ID值是唯一的 可利用 document.getElementById("id")
var mye = document.getElementById("con");
mye 结果为 null 或者 【objcet HTMLparagraphElement】
更改HTML属性:
Object.innerHTML
object 是获取元素的对象 通过 document.getElementById("id"); innerHTML区分大小写
例:
var mychar=document.getElementById("con");
document.write(mychar.innerHTML);
mychar.innerHTML = "hello world";
document,write(mychar.innerHTML)
改变HTML样式: object.style.property = new style;
例:
var mychar = document.getElementById("pcon");
mychar.style.color = "red";
显示和隐藏(display属性)
object.style.display = value; value 值为 none(隐藏) 或 block(显示为块级元素)
例:
var mychar = document.getElementById("con");
function hidetext(){
mychar.style.display = "none";
}
function showtext(){
mychar.style.display = "block";
}
控制className属性(类名)
object.className = className;
获取元素class属性,改为网页内某元素制定的CSS样式改变外观