DOM操作2

一、API和WebAPI

•  API就是接口，就是通道，负责一个程序和其他软件的沟通，本质是预先定义的函数。
• Web API是网络应用程序接口。包含了广泛的功能，网络应用通过API接口，可以实现存储服务、消息服务、计算服务等能力，利用这些能力可以进行开发出强大功能的web应用。

二、DOM对象

•  通过DOM方式获取的元素得到的对象
• 页面中最顶级的对象：document
• 根元素：HTML标签

三、总结获取元素的方式

•  根据id属性的值获取元素，返回的是一个元素对象

document.getElementById("id属性的值")

• 根据标签的名字获取元素，返回的是一个伪数组，里面存储了多个DOM对象

 document.getElementsByTagName("标签名字")

• 根据name的值获取元素，返回的是一个伪数组，里面存储了多个DOM对象

document.getElementsByName("name属性的值")

• 根据类样式的名字来获取元素，返回的一个伪数组，里面存储了多个DOM对象

 document.getElementsByClassName("类样式的名字")

• 根据选择器获取元素，返回的是一个元素的对象

 document.querySelector("选择器的名字")

• 根据选择器获取元素，返回的是一个伪数组，里面存储了多个DOM对象

document.querySelectorAll("选择器的名字")

四、textcontent和innertext及其兼容性写法

•  设置标签中的文本内容，使用 textcontent 属性，谷歌火狐支持，IE8不支持
• 设置标签中的文本内容，使用 innertext  属性，谷歌火狐，IE8支持，但是有些低版本的火狐浏览器不支持
• 兼容性代码写写法：（原理：如果属性在浏览器不支持，这个属性类型是 undefined ）

 <script>//设置任何任意的标签中间的任意文本内容function setInnerTtext(element,text){if(typeof element.textContent=="undefined"){element.innerText=text;}else{element.textContent=text;}}//获取任意标签中间的文本内容function getInnerTtext(element){if(typeof element.textContent=="undefined"){return element.innerText;}else{return element.textContent;}}</script>

五、innerText和innerHTML的区别

• innerText  主要设置文本的内容的，设置标签的内容是没有标签的效果的
• innerHTML 可以设置文本的内容，也可以设置标签内容，标签可以呈现效果
• innerText 可以获取标签中间的文本内容，获取不到文本内容里包含的标签
• innerHTML 可以获取标签中间的文本内容，也可以获取文本中包含的标签
• 所以推荐使用innerHTML

六、自定义属性

• HTML本身没标签中本身没有这个属性，程序员自己添加的，为了储存数据
• 获取属性用getAttribute("属性名")-----如果html里写了自定义的标签或者已经设置

<input type="button" value="自定义" id="btn"><p new="20">获取这个自定义属性</p><p id="demo"></p><script>document.getElementById("btn").onclick=function(){var p=document.getElementsByTagName("p")[0];document.getElementById("demo").innerHTML=p.getAttribute("new");}</script>

• 设置属性用setAttribute（“名字”，“值”）-----通过js设置
• 移除自定义属性,用removeAttribute("属性的名字")-----也可以移除不是自定义的自带属性

    <input type="button" value="设置" id="btn1"><input type="button" value="移除" id="btn2"><p>设置一个自定义属性</p><p>xxxxxxxxxx</p><script>document.getElementById("btn1").onclick=function(){document.getElementsByTagName("p")[0].setAttribute("new","10");};document.getElementById("btn2").onclick=function(){document.getElementsByTagName("p")[0].removeAttribute("new");};</script>

七、直接通过document获取元素

    <script>//1.获取body
    console.log(document.body);//返回body标签(元素)//2.获取title
    console.log(document.title);//返回标签中的值,即标题//3.获取html
    console.log(document.documentElement);//返回html标签(元素)</script>

八、案例

 <!-- 例1:点击按钮禁用文本框 --><input type="text" value="" id="txt"><input type="button" value="禁止使用文本框" id="btn"><script>document.getElementById("btn").onclick=function(){document.getElementById("txt").disabled=true;};</script>

<!-- 例2:点击按钮修改列表背景颜色 --><input type="button" value="背景颜色" id="btn"><ul id="uu"><li>要拿执着</li><li>让我不低头</li><li>更精彩的活</li><li>将命运打破</li></ul><script>document.getElementById("btn").onclick=function(){var liobj=document.getElementById("uu").getElementsByTagName("li");for(var i=0;i<liobj.length;i++){liobj[i].style.backgroundColor="yellow";}};</script>

<!-- 例3:阻止超链接跳转 --><a href="http://www.baidu.com" id="ak">百度</a><script>document.getElementById("ak").onclick=function(){return false;}</script>

<!-- 例4:点击小图切换大图 --><a href="big.png" id="ak"><img src="small.png" alt=""></a><br><img src="" alt="" id="big"><script>document.getElementById("ak").onclick=function(){document.getElementById("big").src=this.href;return false;};</script>

<!-- 例5:列表隔行变色 --><input type="button" value="隔行变色" id="btn"><ul id="uu"><li>要拿执着</li><li>让我不低头</li><li>更精彩的活</li><li>将命运打破</li></ul><script>document.getElementById("btn").onclick=function(){var liobj=document.getElementById("uu").getElementsByTagName("li");for(var i=0;i<liobj.length;i++){// if(i%2==0){//     liobj[i].style.backgroundColor="yellow";// }else{//     liobj[i].style.backgroundColor="red";// }
                liobj[i].style.backgroundColor=i%2==0?"yellow":"red";}};</script>

 <!-- 例6:列表高亮显示,排他功能 --><ul id="uu"><li>要拿执着</li><li>让我不低头</li><li>更精彩的活</li><li>将命运打破</li></ul><script>//获取所有的li标签var liobj=document.getElementById("uu").getElementsByTagName("li");for(var i=0;i<liobj.length;i++){//为li标签注册鼠标进入事件
            liobj[i].onmousemove=function(){this.style.backgroundColor="yellow";}//为li标签注册鼠标离开事件
            liobj[i].onmouseout=function(){this.style.backgroundColor="";}}</script>

<!-- 例7: 根据name属性值获取元素 --><input type="button" value="显示效果" id="btn"><br><input type="text" value="你好" name="name1"><br><input type="text" value="你好" name="name2"><br><input type="text" value="你好" name="name3"><br><input type="text" value="你好" name="name1"><br><input type="text" value="你好" name="name3"><br><input type="text" value="你好" name="name2"><br><input type="text" value="你好" name="name1"><script>document.getElementById("btn").onclick=function(){var inputs=document.getElementsByName("name1");for(var i=0;i<inputs.length;i++){inputs[i].value="我哈儿美好";}}</script>

<!-- 例8:根据类样式的名字获取元素 --><div class="cls">第一个div</div><div>第二个div</div><span>第一个span</span><br><span class="cls">第二个span</span><br><input type="button" value="显示效果" id="btn"><script>document.getElementById("btn").onclick=function(){var clsobj=document.getElementsByClassName("cls");for(var i=0;i<clsobj.length;i++){clsobj[i].style.backgroundColor="yellow";}};</script>

 <!-- 例9:其他的获取元素的方法 --><div class="dv">第一个div</div><div>第二个div</div><span>第一个span</span><br><span id="sp">第二个span</span><br><input type="button" value="显示效果" id="btn"><script>document.getElementById("btn").onclick=function(){document.querySelector(".dv").style.backgroundColor="yellow";var spobj=document.querySelectorAll("#sp");for(var i=0;i<spobj.length;i++){spobj[i].style.backgroundColor="pink";}};</script>

<!-- 例10:div高亮显示 -->

<style>

#dv{

width: 200px;

height: 200px;

background: rgb(161, 131, 131);

border: 10px solid rgb(161, 131, 131);

}

</style>

   <div id="dv"></div><script>document.getElementById("dv").onmouseover=function(){this.style.border="10px solid red";}document.getElementById("dv").onmouseout=function(){this.style.border="";}</script>

 <!-- 例11:模拟搜索框 --><input type="text" id="txt" value="请输入关键字" style="color: gray"><script>document.getElementById("txt").onfocus=function(){if(this.value=="请输入关键字"){this.value="";this.style.color="black";}};document.getElementById("txt").onblur=function(){if(this.value.length==0){this.value="请输入关键字";this.style.color="gray";}}</script>

<!-- 例13:验证文本框密码长度 --><input type="text" value="" id="txt"><script>document.getElementById("txt").onblur=function( ){if(this.value.length>6&&this.value.length<10){this.style.backgroundColor="red";}else{this.style.backgroundColor="blue";}};</script>