DOM学习笔记

DOM(文档对象模型（Docunment Object Model ）)

标签元素节点某种意义上是一个意思。语境不同，叫法不同。

<style>

　　#d1{100px;height:100px;}

</style>

<body>

</body>

Id选择器

　　var d1 = document.getElementById("d1") Id选择器括号内为字符串形式加双引号获取id为d1的元素

　　d1.innerHTML ="123456";

　　d1.style="color:red;font-size:50px;" 修改样式 d1中的文字变色字体变大

　　d1.style.color="red";

　 alert(d1.style.width); 只能获取标签里的样式，css中d1的样式无法获取

Class选择器

　　var d2 =document.getElementsByClassname("d2"）[0]； Class选择器

　　d2.innerHTML="ABCDEF";

标签选择器

　　var d3 = document.geiElementsByTagName("span"); 标签选择器 Tag位标签

　　d3,innerHTML="xyzijk ";

</scripr>

修改内容

　　innerHIML和innerText区别改内容在内容中加<br/>(折行符)在HTML中会读出来换行在Text不会换行直接在网页中显示<br/>;

方法

<body>

　　　　<option select="select">1</option> select 默认被选中

　　</select>

　　<input type="radio" checked="checked"/> 单选标签

　　<input type="checkbox" checked="checked"/> 多选标签

</body>

　　var btn = document.getElementById("btn");

　　btn.onclick=funtion(){ 点击btn发生事件

　　　　btn.setAttribute("value""不是按钮") 设置btn的属性括号内放两个参数第一个参数为属性名字第二个参数属性的值

　　　　btn.getAttribute("value") 获取属性

　　　　btn.removeAttribute() 移除属性

}

造标签

create 创造

　　var spn=dcument.createElement("span"); 创造一个span元素（标签）

　　spn.style.colot="red";

　　spn.innerText="滋滋滋滋"；

append 增加

　　document.body.appendChild(spn); append 增加 Child 子标签文档对象的去除body在body中添加一个子元素子元素是spn

　　document.getElementById("d1").appendChild(spn); 从div中添加spn

删除元素

removeChild

　　document.getElementById("d1")removeChid(spn); 删除d1中的spn

</script>