对JS基础的DOM基础做一个复习把一些需要记忆的记下来
DOM是针对HTML和XML文档的API，也就是一个应用程序的编程接口
有时候我们需要对一个标题，一个段落设置样式，或者绑定一些事件之类的前提条件是先取出来
document.getElementById(“id”) 返回对拥有指定ID的第一个对象的引用
返回值是DOM对象 id是DOM元素上id属性的值
必须要有ID属性
比如
<div class=”box” id=”box”>元素</div>
<script>
//获取id为box的这个元素
varbox = document.getElementById(“box”);
console.log(box);
</script>
显示出<div class=”box” id=”box”>元素</div>
Id在页面当中独一无二的，ID不重复 如果不小心一个页面2个ID，就返回第一个
如果我们有一个列表有很多<li>我们想把每一个<li>都取出来，我们给每一个li取id是不现实的，这时候用
document.getElementByTagName(“tag”)
返回一个对所有tag标签的集合
返回值：数组 tag为要获取的标签名称
<ul id=”list1”>
<li>前段开发</li>
<li>服务器端开发</li>
<li>ui设计</li>
</ul>
<script>
Var list=document.getElementByTagName(“li”);
console.log(list.length);
</script>
发现3个
<ul id=”list1”>
<li>前段开发</li>
<li>服务器端开发</li>
<li>ui设计</li>
</ul>
<ol>
<li>JS原生</li>
<li>JS框架</li>
</ol>
如果加了这个ol就是5个元素
如果只想获得ul的li
<ul id=”list1”>
<li>前段开发</li>
<li>服务器端开发</li>
<li>ui设计</li>
</ul>
<ol id=”list2”>
<li>JS原生</li>
<li>JS框架</li>
</ol>
<script>
var list=document.getElementById(“list1”) .getElementByTagName(“li”);
console.log(list.length);
</script>
就只有3个
给元素设置样式
ele.style.styleName=styleValue
这是ele元素的样式
SytleName为样式名称 不能使用-连字符形式font-size编程fontSize
StyleValue为样式值
<div class=”box” id=”box”>元素</div>
<script>
//获取id为box的这个元素
varbox = document.getElementById(“box”);
box. style.color=’#f00’;
box.style.fontWeight=’bold’;
</script>
注意如果是document.getElementByTagName(“tag”)
返回的是数组需要遍历
For(vari=0,len=list.length;i<len:i++){
List[i] . style.color=’#f00’;
}
语法ele.innerHTML 返回ele元素开始和结束之间的HTML和文本
ele.innerHTML = “html”设置ele元素开始和结束之间的HTML内容为html和文本
<ul id=”list1”>
<li>前段开发</li>
<li>服务器端开发</li>
<li>ui设计</li>
</ul>
<script>
var list=document.getElementById(“list1”).getElementByTagName(“li”);
For(var i=0,len=list.length;i<len:i++){
Console.log(list[i].innerHTML)
}
</script>
出来的是前段开发
服务器端开发
UI设计
<li><a>前段开发< /a></li>
<li>服务器端开发</li>
<li>ui设计</li>
这样就会 <a>前段开发</a>
服务器端开发
UI设计
<script>
var list=document.getElementById(“list1”).getElementByTagName(“li”);
For(var i=0,len=list.length;i<len:i++){
list[i].innerHTML= list[i].innerHTML +’程序’;
}
</script>
就每个都加了个程序
ele.className 返回ele元素的class属性
ele.className=’cls’ 设置ele元素的class为cls
lis[1].className=’current’;
如果原来有设置，原来的类就被替换了
ele.getAttribute(“attribute”);
获取ele元素的attribute属性
Attribute是要获取的html属性（如 id type）
<p id=”test” class=’text’ align=”center”curdata=”title”>文本</p>
<script>
varp=document.getElementById(‘text’)；
console.log(p.id); #得到text 因为一个标签本身就具有这些属性，比如说class出来
#就是undefined，curdata也不行
</script>
我们一定要得到就得p.getAttribute(“curdata”)就得到type
p.getAttribute(“class”)就得到p的classname 就是text
设置属性 ele.setAttribute(“attribute”,value)
Atrrbute是设置成哪个属性 value是设置成什么值如果是字符串需要加引号
比如 p.setAttribute(“data-color”,”red”)
删除属性ele.removeAttribut(“attribute”)
把DOM事件中需要记录的东西记录下来，帮助自己复习
当然在学习微信小程序的时候，本人已经做了无数次了哈哈
什么是事件：js与HTML的交互其实就是通过事件实现的
比如说商品加入购物车，点了一下加入购物车按钮
点了之后我们发现我们购买的商品是放进购物车，点了一下去结算按钮，跳转到结算页面
这些都是事件来实现了
事件就是文档或浏览器窗口发生的一些特定的交互瞬间。
HTML事件：
直接在HTML元素标签内添加事件，执行脚本
语法<tag 事件=”执行脚本”></tag>
在HTML元素上绑定事件，执行脚本是一个函数的调用
<input type=”button”value=”弹出” onclick=”alert(“我是按钮”)”>
这就绑定了
<input type=”button”value=”弹出” onclick=”haha(this)”>
在事件触发的函数中，this就是对DOM对象的应用
<script>
function haha(btn){
//鼠标滑过按钮变红
btn.style.background=”#f00”;
}
</script>
传递参数
<input type=”button”value=”弹出” onclick=”alert(“我是按钮”)”>
这就绑定了
<input type=”button”value=”弹出” onclick=”haha(this,”#f00”)”>
在事件触发的函数中，this就是对DOM对象的应用
<script>
function haha(btn,bgcolor){
//鼠标滑过按钮变红
btn.style.background=bgcolor
}
</script>
为了防止有很多<li/>这种很一个一个绑定没法弄，就有了0级事件
DOM0级事件
1. 通过DOM获取元素
2. (获取HTML元素).事件=执行脚本
ele.事件=执行脚本
执行脚本可以使一个匿名函数，也可以是一个函数的调用
<ul>
<li>哈哈</li>
<li>呵呵</li>
</ul>
这种就用0级
<div class=”btn”id=”btn”>开始</div>
<script>
Var btn = document.getElementBy(“btn”);
Btn.onclick=function(){
this.classname = onload;
}
</script>
不推荐用HTML事件，因为多元素绑定相同事件效率低
另外不建议在HTML中写JS代码
如果不是匿名函数
FunctionclickBtn(){
}
Btn.onclick=clickBtn;
这里前外别加()
不变成没触发事件就调用了
键盘事件document.onkeydown=function(event){
#Event表示事件的状态，如触发event对象的元素，鼠标的位置状态
Console.log(event.keyCode);
}