心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

JavaScript--DOM(上)

发布时间：2022-07-01 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript--DOM(上)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

1.DOM(document object model)即文档对象模型。DOM是JS中内置的引用类型document对象，DOM对象常用来操作节点(标签)，如：操作节点样式等。 

2.节点树：html文件中节点的关系。节点(标签)在JS中属于引用类型数据。

JavaScript--DOM(上)

 3.DOM四个属性

<script type="text/javascript">
    console.log(document.documentElement);//获取<html>标签
    console.log(document.head);//获取<head>标签
    console.log(document.title);//获取<title>标签的文本
    console.log(document.body);//获取<body>
</script>

 

JavaScript--DOM(上)

4.getElementById方法

getElementByld方法：可以获取到节点树上任意节点，需要给标签添加id属性，通过id选择器获取。

<body>
    <div id = 'box'>我和我的祖国一刻也不能分割</div>
</body>
</html>
<script type="text/javascript">
    console.log(document.getElementById('box'));
</script>

JavaScript--DOM(上)

5. 操作节点属性

可以通过DOM方法获取节点树上的任意节点(标签)，经常通过点语法来操作节点的属性、文本、样式等。

<body>
    <div id = 'box' class = 'cur'>我是祖国的花朵</div>
</body>
</html>
<script type="text/javascript">
    var div = document.getElementById('box');
    //获取节点属性值
    console.log(div.id);
    console.log(div.className);//注意这里必须用className不能用class
    //修改节点的属性值
    div.id = 'la'
    div.className = 'lala'
</script>

6.操作节点文本

通过DOM对象提供的方法获取对应的节点，也可以用过点语法操作节点文本。 操作节点文本分两种情况：

①操作表单元素()文本，需要通过value属性进行操作。

<body>
    <input type="text" id="box" value="这是通过value设置的默认文本">
</body>
</html>
<script type="text/javascript">
    var input = document.getElementById('box');
    console.log(input.value);
    input.value = '设置新文本';
    console.log(input.value);
</script>

②操作非表单元素文本，通过innerHTML属性进行操作。

<body>
    <p id='abc'>学习使我快乐</p>
</body>
</html>
<script type="text/javascript">
    var p = document.getElementById('abc');
    console.log(p.innerHTML);//获取文本
    p.innerHTML = '我爱学习';//修改文本
    console.log(p.innerHTML);
</script>

7.操作节点样式

(1)样式的三种写法：

①行内样式

<div style="width: 100px;height: 100px;color:red">嘿嘿嘿</div>

②内部样

<style>
    .abc{
        color:red;
        border:1px;
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
</style>

③外部样式：直接写在.css文件中写入样式，并通过<link>标签引入。

(2)操作样式

带有-的样式如background-color全部变为驼峰写法。

<script type="text/javascript">
    var p = document.getElementById('abc');
    //获取行内样式
    console.log(p.style);
    console.log(p.style.width);
    console.log(p.style.backgroundColor);//注意写法
    //设置行内样式
    p.style.width = '200px';
    console.log(p.style.width);
</script>

8.事件绑定

①概述：在网站中，用户鼠标移上某个元素、单机某个元素时，元素可以对用户的行为进行响应。在JS中只有标签才能绑定事件。

语法格式：element.onxxx = function(){}

右侧部分是一个函数(事件处理函数)：当用户触发事件时才会执行一次。

②通过onclick或ondblclicd绑定单机或双击事件

<script type="text/javascript">
    //绑定单机事件
    var div = document.getElementById('box');
    div.onclick = function(){
        //点击后修改背景颜色
        div.style.backgroundColor = 'red';
    }
</script>

9.信号量思想

下例中，每点击文字一次，字数就会变大一号。

<script type="text/javascript">
    //绑定单机事件
    var p = document.getElementById('box');
    var fs = 12;//默认字号是12
    p.onclick = function(){
        fs++;
        //修改字体大小
        p.style.fontSize = fs + 'px';//这里+为连字符，拼成字符串
    }
</script>

10.onmouseenter/onmouseleave鼠标移上/移除事件

下例实现的功能为：将鼠标放到图1上，图1就变为图2；移开鼠标，又变回图1。

<body>
    <img src="./JS封面.jpg" id="box">
</body>
</html>
<script type="text/javascript">
    var img = document.getElementById('box');
    //绑定鼠标移上事件
    img.onmouseenter = function(){
        //修改图片地址
        img.src = "./Mao.jpg";
    };
    //绑定鼠标移除事件
    img.onmouseleave = function () {
        img.src = "./JS封面.jpg";
    };
</script>

11.onfocus/onblur聚焦与失焦事件

聚焦：点击输入框，有光标闪烁。失焦：点击空白处，光标不再闪烁。

<body>
    <p>
       请输入手机号：<input type="text" id="cur">
        <span id="phone"></span>
    </p>
</body>
</html>
<script type="text/javascript">
    var input = document.getElementById('cur');
    var span = document.getElementById('phone');
    //聚焦事件
    input.onfocus = function(){
        //文本框文字颜色变为绿色
        input.style.color = "green";
    };
    //失焦事件
    input.onblur = function(){
        //获取文本框内文本
        var txt = input.value;
        if(/^1[3456789]d{9}/.test(txt)){
            span.innerHTML = "是手机号格式";
        }else{
            span.innerHTML = "不是手机号格式";
        }
    }
</script>

12.鼠标系列事件

在DOM中可以给任意节点绑定鼠标系列事件，常用的有以下几种：

①onmousedown：鼠标按下事件，类似于单机事件。

②onmousemove：鼠标移动事件

③onmouseup：鼠标抬起事件

<script type="text/javascript">
    //鼠标按下
    document.onmousedown = function () {
        //鼠标按下后使背景颜色变红
        document.body.style.background = "red";
    }
    //鼠标移动
    document.onmousemove = function () {
        //使背景颜色变为随机的颜色
        var R = parseInt(Math.random()*255);
        var G = parseInt(Math.random()*255);
        var B = parseInt(Math.random()*255);
        document.body.style.background = "rgb("+R+","+G+","+B+")";
    }
    //鼠标抬起
    document.onmouseup = function(){
        document.body.style.background = "white";
    }
</script>

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript--DOM(上)全部内容，希望文章能够帮你解决JavaScript--DOM(上)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程