DOM笔记

最新推荐文章于 2022-04-18 22:51:50 发布

zhenmtwx

最新推荐文章于 2022-04-18 22:51:50 发布

阅读量142

点赞数

文章标签：禁用文本框阻止超链接跳转

本文链接：https://blog.csdn.net/zhenmtwx/article/details/84959470

版权

DOM树：页面→文档→对象------层次结构→树状图

内置对象

自定义对象

浏览器对象

DOM对象：通过DOM方式得到的元素所得的对象

元素：页面中的标签

节点：页面中所有的内容，标签，属性，文本

根元素：html标签

页面中的顶级对象：document

禁用文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>checkbox css change</title>
</head>
<body>
<input type="button" value="禁用文本框" id="btn">
<input type="text" value="文本框" id="txt">
<script>
    document.getElementById("btn").onclick=function () {
        document.getElementById("txt").disabled=true;
    };
</script>
</body>
</html>

点击按钮修改背景颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>checkbox css change</title>
</head>
<body>
<input type="button" value="变色" id="btn">
<ul id="uu">
    <li>c++</li>
    <li>python</li>
    <li>javascript</li>
    <li>c#</li>
    <li>php</li>
</ul>
<script>
    document.getElementById("btn").onclick=function () {
        document.getElementById("uu").style.backgroundColor="pink";
    };
</script>
</body>
</html>

阻止超链接使用

注意：

<a href="www.baidu.com">百度</a>

无法正常跳转会被webstorm添加默认接口

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>checkbox css change</title>
</head>
<body>
<!--方式一-->
<a href="https://www.baidu.com/" onclick="alert(1221); return false" >百度1</a>

<!--方式二-->
<script>
    function f1() {
        alert("1331");
        return false;
    }
</script>
<a href="https://www.baidu.com/" onclick="return f1()">百度2</a>

<!--方式三-->
<a href="https://www.baidu.com/" id="ak">百度3</a>
<script>
    document.getElementById("ak").onclick=function () {
        alert("1441");
        return false;
    }
</script>

</body>
</html>

画廊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h2 {
            color: #333;
            background-color: transparent;
        }
        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #imagegallery {

            list-style: none;
        }
        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
<body>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<h2>画廊</h2>

<ul id="imagegallery">
    <li><a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1"/>
    </a></li>
    <li><a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" width="100" alt="美女2"/>
    </a></li>
    <li><a href="images/3.jpg" title="美女C">
        <img src="images/3-small.jpg" width="100" alt="美女3"/>
    </a></li>
    <li><a href="images/4.jpg" title="美女D">
        <img src="images/4-small.jpg" width="100" alt="美女4"/>
    </a></li>
</ul>

<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<img src="" alt="" id="big">
<script>
    var aobjs=my$("imagegallery").getElementsByTagName("a");
    for(var i=0;i<aobjs.length;i++){
        aobjs[i].onclick=function () {
            my$("image").src=this.href;
            my$("des").innerText=this.title;
            return false;
        };
    };

</script>
</body>
</html>

隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<input type="button" value="隔行变色" id="btn">
<ul id="uu">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li>008</li>
</ul>
<script>
my$("btn").onclick=function () {
    var list= my$("uu").getElementsByTagName("li");
    for(var i=0;i<list.length;i++){
        // if(i%2==0){
        //     list[i].style.color="red";
        // }else {
        //     list[i].style.backgroundColor="yellow";
        // }
        list[i].style.backgroundColor=i%2==0?"red":"yellow";
    };
}

</script>
</body>
</html>

高亮显示（排他显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
ul{
    list-style: none;
    cursor: pointer;
}
    </style>
</head>
<body>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<!--<input type="button" value="隔行变色" id="btn">-->
<ul id="uu">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li>008</li>
</ul>
<script>
    var list=document.getElementsByTagName("li");
    for(var i=0;i<list.length;i++){
        list[i].onmouseover=function () {
            this.style.backgroundColor="pink";
        };
        list[i].onmouseout=function () {
            this.style.backgroundColor="";
        }
    };

</script>
</body>
</html>

* 根据id属性的值获取元素,返回来的是一个元素对象
* document.getElementById("id属性的值");
*
* 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByTagName("标签名字");
*
* 下面的几个,有的浏览器不支持

* 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByName("name属性的值")
* 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByClassName("类样式的名字")
* 根据选择器获取元素,返回来的是一个元素对象
* document.querySelector("选择器的名字");
*
* 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.querySelectorAll("选择器的名字")

//注册获取焦点的事件

onfocus

//注册失去焦点的事件

onblur

//设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
//设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
//判断这个属性的类型 是不是undefined,就知道浏览器是否支持

//兼容代码

//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
  //判断浏览器是否支持这个属性
  if(typeof element.textContent =="undefined"){//不支持
    element.innerText=text;
  }else{//支持这个属性
    element.textContent=text;
  }
}

//总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
//总结:innerHTML是可以设置文本内容
//总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

//总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML


//获取的时候:
//innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
//innerHTML才是真正的获取标签中间的所有内容

//html标签中有没有什么自带的属性可以存储成绩的----没有
//本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据

//在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值

//总结:设置自定义属性:setAttribute("属性的名字","属性的值");
//获取自定义属性的值:getAttribute("属性的名字")

//list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
list[i].setAttribute("score",(i+1)*10);
//点击每个li标签,显示对应的自定义属性值
list[i].onclick=function(){
  alert(this.getAttribute("score"));
};

zhenmtwx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM笔记

DOM树：页面→文档→对象------层次结构→树状图内置对象自定义对象浏览器对象DOM对象：通过DOM方式得到的元素所得的对象元素：页面中的标签节点：页面中所有的内容，标签，属性，文本根元素：html标签页面中的顶级对象：document禁用文本框&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &l...
复制链接

扫一扫