js(dom)

关系图：

 

1.类名展示

<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML); //获取第一个<p>的展示
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");  //获得第一个<p class="">的展示
</script>

2.事件监听

//<mousedown id="myBtn">点我</mousedown>
<button id="mybt">click me</button>
<p id="demo"></p>
<script>
document.getElementById("mybt").addEventListener("click",displayDate); //addEventListener() 方法在按钮中添加点击事件,点击触发达到监听效果
function displayDate(){
    document.getElementById("demo").innerHTML = Date();
}
</script>

3.添加事件句柄

<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
//document.getElementById("myBtn").addEventListener("click", function(){
//    alert("Hello World!");
//}); 与上行作用相同
</script> 

<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);    //addEventListener()可以添加多个事件句柄
x.addEventListener("click", someOtherFunction);  //mouseover,click,mouseout,mousedown,resize(重置浏览器的窗口触发)
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

4.enterlistener

<style>
#myDIV {
    background-color: coral;
    border: 1px solid;     //边框
    padding: 50px;         //填充
    color: white;          //字体颜色
}
</style>
<body>
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
    <p>点击按钮移除 DIV 的事件句柄。</p>
    <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>

5.get url

<body>
    <form action="https://www.houdunren.com" id="form">
        <input type="text" name="password" />
        <hr />
        <input type="checkbox" name="confirm_password" />
        <button>push</button>                       //用于触发action链接，否则不能实现跳转
    </form>
</body>
访问https://www.houdunren.com/?password=&confirm_password=
<body>
    <form action="https://www.houdunren.com" id="form">
        用户名：<input type="text" name="user" />                //录入文字空格
        <hr />
        接受协议：<input type="checkbox" name="copyright" />   // 勾选box
        <button>push</button>                                              //点击提交，触发事件
    </form>
<script>
    function query(el){
        return document.querySelector(el);
    }
//搜索form并添加事件监听
    query("#form").addEventListener("submit",
    function(event){
        let user = query("[name='user']").value.trim();                    //（query）搜索name为user的字符串的值，并删除（trim）两边空格
        let copyright = query("[name='copyright']").checked;      //查看选中状态checked
      
        if (!user || copyright ===false){
            event.preventDefault();
            alert('请勾选接收协议并添加用户');                             //if判断成立后，再进行触发进入https://www.houdunren.com链接
        }
        console.log(copyright);
        console.log(user)
        console.log(user.length)
 //       event.preventDefault();                             //阻止默认事件，提交之后就不会跳转到上面action地址
    });
</script>

　　

posted @ 2022-09-21 17:21  JASON_yul  阅读(39)  评论(0)    收藏  举报