DOM(文档对象模型（Docunment Object Model ）)
标签 元素 节点 都是一个东西
<style>
#d1{100px;height:100px;}
</style>
<body>
<div id="d1"></div>
<div class="d2"></div>
<span></span>
</body>
<script>
Id选择器
var d1 = document.getElementById("d1") Id选择器 括号内为字符串形式加双引号 获取元素id的d1 Element为元素得到意思 因为id为单一所By不用加s
d1.innerHTML ="123456";
d1.style="color:red;font-size:50px;" 修改样式 d1中的文字变色 字体变大 主要用来特效
d1.style.color="red";
alert(d1.style.width); 只能获取到单独给标签加的样式
Class选择器
var d2 =document.getElementsByClassname("d2"）[0]； Class选择器 中括号的0位数组
d2.innerHTML="ABCDEF";
标签选择器
var d3 = document.geiElementsByTagName("span"); 标签选择器 Tag位标签
d3,innerHTML="xyzijk ";
</scripr>
修改内容
innerHIML和innerText区别 改内容 在内容中加<br/>(折行符)在HTML中会读出来换行在Text不会换行直接在网页中显示<br/>;
方法
<body>
<input id="btn" type="button" value="按钮"/>
<select>
<option select="select">1</option> select 默认被选中
<option>2</option>
<option>3</option>
</select>
<input type="radio" checked="checked"/> 单选标签
<input type="checkbox" checked="checked"/> 多选标签
<div id="d1" style="position:fixed;right:0px;bottom:0px;100px;height:100px;background-color:blue;"><div>
</body>
<script>
var btn = document.getElementById("btn"); 获取btn的id
btn.onclick=funtion(){ 鼠标点击btn发生事件
btn.setAttribute(“value”“”“不是按钮”) 设置btn的属性括号内放两个参数第一个参数为属性名字 第二个参数属性的值
btn.getAttribute(“value”) 获取属性
btn.removeAttribute() 移除属性
}
造标签
create 创造的意思
var spn=dcument.createElement("span"); create 创造的意思 创造的标签放到spn里
spn.style.colot="red";
spn.innerText="滋滋滋滋"；
append 增加
document.body.appendChild(spn); append 增加 Child 儿子 文档对象的去除body在body中添加一个子元素子元素是spn
document.getElementById("d1").appendChild(spn); 网div中添加spn
删除元素
removeChid
document.getElementById("d1")removeChid(spn); 删除d1中的spn
</script>