JavaScript_day03

最新推荐文章于 2024-09-10 17:12:35 发布

尒忸姺泩

最新推荐文章于 2024-09-10 17:12:35 发布

阅读量54

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46106562/article/details/119765137

版权

本文详细介绍了HTML DOM操作中的节点类型、元素创建方法，如document.write、innerHTML和createElement，以及Event事件处理，包括冒泡与捕获、BOM操作（如window对象、定时器）和关键概念如Event三要素。

摘要由CSDN通过智能技术生成

1.节点

获取节点类型的方式	描述
nodeType	element	1
	属性节点(attr)	2
	文本节点(text)	3
	注释节点(comment)	8
nodeName	元素节点	大写标签名
	属性节点	属性名称
	文本节点	#text
	文档节点	#document
nodeValue	文本节点	文本
	属性节点	属性值
	文档和元素节点	null

获取父节点: parentNode

<body>
    <div id="box1">
        <span>hello</span>
        <input type="text" name="username">
        <p class="p">HTML1</p>
    </div>
</body>
<script>
        var span=document.getElementsByTagName("span");

        console.log(span[0].parentNode.nodeName);// DIV
    </script>

获取子节点: children 和 childNodes

<body>
    <div id="box1">
        <span>hello</span>
        <input type="text" name="username">
        <p class="p">HTML1</p>
    </div>
</body>
<script>
        var result=document.querySelector('div');
        
        // childNodes:返回包括元素节点和文本节点
        // [text, span, text, input, text, p.p, text]
        console.log(result.childNodes);
        
        // children:获取子元素节点(所有子标签)
        // [span, input, p.p]
        console.log(result.children);
    </script>

获取后一个兄弟节点: nextElementSibling(不包括文本节点)

获取前一个兄弟节点: previousElementSibling(不包括文本节点)

2.创建元素(标签):

document.write(): document.write('新设置的内容<p>标签也可以生成</p>')

<body>
    <div id="div">
        <a href="#">111</a>
        <p>hello</p>
        <span>java</span>
    </div>
    <script>
        
        document.write("新设置的内容<p>标签也可以生成</p>");
    </script>
</body>

innerHTML: 对象.innerHTML= '新内容<p>新标签</p>';

<body>
    <div id="div">
        <a href="#">111</a>
        <p>hello</p>
        <span>java</span>
    </div>
    <script>
        var dv=document.getElementById("div");

        // 会将原有的覆盖掉,显示新内容
        dv.innerHTML= '新内容<p>新标签</p>';
    </script>
</body>

createElement(): var div = document.createElement('div');

<body>
    <div id="div">
        <a href="#">111</a>
        <p>hello</p>
        <span>java</span>
    </div>
</body>
<script>
    var dv=document.getElementById("div");
    var p=document.createElement("p");
    p.innerHTML="新建标签";
    // document.body.appendChild(p);// 将p标签插入到body标签下
    dv.appendChild(p);// 将p标签插入到div标签下
</script>

3.Event事件:

事件三要素: 事件源(哪个元素引发的事件)、事件(执行的动作)、事件的驱动程序(执行的结果)

执行事件的步骤:

获取元素 ==> 绑定事件 ==> 书写驱动程序

<body>
    <div id="div">
        <a href="#">111</a>
        <p id="p">hello</p>
        <span>java</span>
    </div>

</body>
<script>
    var p = document.getElementById("p");
    var dv = document.getElementById("div");

    // 绑定事件的新方式addEventListener和attachEven

    // 对象.addEventListener("事件类型名字,没有on",处理函数名,事件阶段)
    p.addEventListener("click",click,false);//设置为false,表明当点击子对象时,事件是从里向外执行(即冒泡,由子向父)
    function click(){
        alert(p.innerHTML);
        event.stopPropagation();// 阻止冒泡,写在哪个事件中,则另一个事件就不会触发
    }

    dv.addEventListener("click",click1,false);
    function click1(){
        alert(dv.innerHTML);
    }

    // 解绑事件
    对象.removeEventListener("没有on的事件类型",函数名字,false);
</script>

注:事件阶段:

捕获阶段:先有文档的根阶段document往事件触发对象,从外向内捕获事件对象

目标阶段:到达目标事件位置,触发事件

冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象

什么是冒泡事件:嵌套关系的两个元素都绑定了同一个事件,用户点击了子标签,触发事件时执行的顺序

在addEventListener中的第三个参数中,如果为false,则事件是从里向外(子向父冒泡)执行,如果为true,ze事件是从外向里(父向子冒泡)执行

4.BOM: 指浏览器对象模型,window对象是BOM的顶层对象,其他对象都是该对象的子对象

常见的BOM操作: 刷新浏览器、后退、前进、在浏览器中输入URL等

window对象:(调用window下的属性和方法时，可以省略window)

对话框:

alert("内容xxx"):消息弹窗

prompt("标题xxx"):输入框

confirm("提示内容"):确认框

onload事件: 会在页面或图像加载完成后立即发生,通常用于body标签,页面完全载入后,执行脚本代码

location对象:

<body>
    <div id="div">
        <a href="#">111</a>
        <p>hello</p>
        <span>java</span>
    </div>
</body>
<script>
    var dv = document.getElementById("div");
    dv.addEventListener("click",click1,false);
    function click1(){

        // 主机名及端口号
        console.log(window.location.host);
        // 主机名
        console.log(window.location.hostname);
        // 端口号
        console.log(window.location.port);
        // 文件的路径---相对路径
        console.log(window.location.pathname);
        // 协议    
        console.log(window.location.protocol);
        // 搜索的内容
        console.log(window.location.search);

        // window.location.href="路径";常用于页面跳转
    }
</script>

history对象:

<body>
    <div id="div">
        <a href="#">111</a>
        <button id="btn1">前进</button>
        <button id="btn2">后退</button>
    </div>
</body>
<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

     btn1.onclick=function(){
        window.history.forward();// 前进
    };

     btn2.onclick=function(){
        window.history.back();// 后退
    };
</script>

定时器: setInteval()(可重复执行)、setTimeout()(不推荐)

<body>
    <button id="btn">停止</button>
    <h2 id="sp">内容</h2>
</body>
<script src="common.js"></script>
<script>
    var btn=document.getElementById("btn");
    var sp=document.getElementById("sp");

    /**
     *  定时器:setInterval()
     *      参数1  要做的事(函数)
     *      参数2  间隔时间(毫秒)
     *      返回值就是定时器的ID值,可以使用这个ID 关闭定时器
     *
     *
     *        setTimeout()语法同setInterval()
     * */

    var timeId=setInterval(function(){
        sp.style.color="rgb("
        +Math.random()*255
        +","+Math.random()*255
        +","+Math.random()*255
        +")";
    },1000);


    btn.onclick=function(){
        clearInterval(timeId);// 取消定时器
    }
</script>

5.其他

ClientX和ClientY:鼠标位置

<script>
        document.onmouseover=function(e){
            console.log(e.clientX);
        }
</script>

尒忸姺泩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_day03

1.节点获取节点类型的方式描述 nodeType element 1 属性节点(attr) 2 文本节点(text) 3 注释节点(comment) 8 nodeName 元素节点大写标签名属性节点属性名称文本节点 #text 文档节点 #document nodeValue 文本节点文本属性节点属性值文档和元素节点 null 获取父...
复制链接

扫一扫