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>
【转载文章务必保留出处和署名,谢谢!】