DOM

Posted 2021-01-23 lujieting

* 1：根据id属性的值获取元素，返回来的是一个元素的对象
* document.getElementById("id属性的值")
*
* 2：根据标签名字获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
* document.getElementsByTagName("标签的名字")
*
* 3：根据name属性的值获取元素，返回来的是个伪数组，里面保存了多个DOM对象
*  document.getElementsByName("name属性的值");
*
* 4：根据类样式的名字来获取属性，返回来的是个伪数组，里面保存了多个DOM对象
*  document.getElementsByClassName("类样式的名字")
*
* 5：根据选择器获取元素，返回来的是一个元素对象
* document.querySelector("选择器的名字")
*
* 6：根据选择器获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
* document.querySelectorAll("选择器的名字")

</script>
<!--1:阻止超链接跳转-->
<!--第一种写法-->
<!--<a href="http://www.baidu.com" onclick="alert(‘嘻嘻‘);return false" >百度</a>-->

<!--第二种写法-->
<!--<a href="http://www.baidu.com" onclick="return f1()">百度</a>-->
<script>
// function f1() {
// alert("哈哈");
// return false;
// }
</script>

<!--第三种写法-->
<!--<a href="http://www.baidu.com" id="bd">百度</a>-->
<script>
// document.getElementById("bd").onclick=function () {
// alert("嘎嘎");
// return false;
// };
</script>



<!--2：点击小图显示大图-->
<!--<a href="../img/10.jpg" id="aa"><img src="../img/20.jpg"></a>-->
<!--<img src="" id="ai"/>-->
<script>
    // ver("aa").onclick=function () {
    //     ver("ai").src=this.href;
    //     return false;
    // };
</script>



<!--3:列表隔行变色：奇黄偶红-->
<!--<input type="button" value="隔行变色" id="tt"/>-->
<!--<ul id="tb">-->
<!--<li>郁金香</li>-->
<!--<li>羊蹄甲</li>-->
<!--<li>六月雪</li>-->
<!--<li>木芙蓉</li>-->
<!--<li>金花茶</li>-->
<!--</ul>-->
<script>
    // ver("tt").onclick=function () {
    //     var list=ver("tb").getElementsByTagName("li");
    //     for(var i=0;i<list.length;i++){
    //         if(i%2==0){
    //             list[i].style.backgroundColor="red";
    //         }else{
    //             list[i].style.backgroundColor="yellow";
    //         }
    //     }
    // };
    //或者
    // ver("tt").onclick = function () {
    //     var list=ver("tb").getElementsByTagName("li");
    //     for(var i=0;i<list.length;i++){
    //         list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
    //     }
    // };
</script>



<!--4:鼠标经过列表时背景颜色发生改变-->
<!--<ul>-->
<!--<li>琴酒</li>-->
<!--<li>伏特加</li>-->
<!--<li>苦艾酒</li>-->
<!--<li>波本威士忌</li>-->
<!--<li>雪利酒</li>-->
<!--</ul>-->
<script>
    // var lis=document.getElementsByTagName("li");
    // for(var i=0;i<lis.length;i++){
    //     lis[i].onmouseenter=function () {
    //         this.style.backgroundColor="red";
    //     };
    //     lis[i].onmouseout=function () {
    //       this.style.backgroundColor="";
    //     };
    // }
</script>



<!--5:根据name属性获取属性值-->
<!--<input type="button" value="设置属性" id="btt"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<!--<input type="text" value="您好" name="name2"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<!--<input type="text" value="您好" name="name3"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<script>
    // ver("btt").onclick=function () {
    //   var bttObj=document.getElementsByName("name1");
    //   for(var i=0;i<bttObj.length;i++){
    //       bttObj[i].value="您好啊，哈哈"
    //   }
    // };
</script>




<!--6:根据类样式的名字来获取元素-->
<!--<input type="button" value="设置" id="uu"/>-->
<!--<p>12345</p>-->
<!--<p class="cls">45678</p>-->
<!--<span>123</span><br/>-->
<!--<span class="cls">456</span>-->
<!--<div>12333</div>-->
<!--<div class="cls">45666</div>-->
<script>
    // ver("uu").onclick=function () {
    //   var aObj=document.getElementsByClassName("cls");
    //   for(var i=0;i<aObj.length;i++){
    //       aObj[i].style.backgroundColor="red";
    //   }
    // };
</script>



<!--7:div高亮显示-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<script>
    // var aObj=document.getElementsByTagName("div");
    // for(var i=0;i<aObj.length;i++){
    //     aObj[i].onmouseover=function () {
    //       this.style.border="2px solid red";
    //     };
    //     aObj[i].onmouseout=function () {
    //         this.style.border="";
    //     };
    // }
</script>




<!--8:模拟搜索框-->
<!--<input type="text" value="请输入搜索内容" id="tex"/>-->
<script>
    // //注册获取焦点的事件
    // ver("tex").onfocus=function () {
    //         if(this.value=="请输入搜索内容"){
    //             this.value="";
    //             this.style.color="black";
    //         }
    // };
    // //注册失去焦点的事件
    // ver("tex").onblur=function () {
    //         if(this.value==""){
    //             this.value="请输入搜索内容";
    //             this.style.color="gray";
    //         }
    // };
</script>



<!--9:验证密码长度-->
<!--<input type="password" value="" id="yy"/>-->
<script>
    // ver("yy").onblur = function () {
    //     if (this.value.length >= 6 && this.value.length <= 10) {
    //         this.style.backgroundColor = "red";
    //     } else {
    //         this.style.backgroundColor = "green";
    //     }
    // };
</script>



<!--10:自定义设置和获取属性-->
<ul id="ll">
    <!--<li>贝尔摩德</li>-->
    <!--<li>水无怜奈</li>-->
    <!--<li>世良真纯</li>-->
    <!--<li>赤井秀一</li>-->
    <!--<li>宫野志保</li>-->
</ul>
<!--总结-->
<!--设置自定义属性：setAttribute("属性的名字"，"属性的值")-->
<!--获取自定义属性的值：getAttribute("属性的名字")-->
<script>
    // //根据id获取ul的标签，并且获取该标签中所有的li
    // var lise=ver("ll").getElementsByTagName("li");
    // //遍历循环
    // for(var i=0;i<lise.length;i++){
    //     //先为每个li添加自定义属性
    //     lise[i].setAttribute("score",(i+1)*10);
    //     //点击每个li标签，显示对应自定义属性值
    //     lise[i].onclick=function () {
    //       alert(this.getAttribute("score"));
    //     };
    // }
</script>