JavaScript(2)---DOM详解

JavaScript(2)---DOM详解

一、DOM概念

什么是DOM

DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方法。它的主要作用包括:

改变HTML 元素 , 改变HTML属性 , 改变CSS 样式对页面中的所有事件做出反应

1、DOM 节点树

概念 DOM模型将整个HTML文档看成一个树形结构,并用document对象表示该文档,树的每个子节点表示HTM档中的不同内容。

如图

JavaScript(2)---DOM详解

上图对应的html代码如下

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
</head>
<body>
    <h1>小小</h1>
    <a href="www.xx.com">链接</a>
</body>
</html>

通过这幅图也可以看出节点树中有以下几种关系

1、父级关系(图中 html 是 head 的父亲,head是title的父亲。)
2、子级关系(图中 head 是 html 的儿子,title是head的儿子。)
3、兄弟关系 (图中 head 和 body是兄弟关系。p 和 h1 是兄弟关系。)

2、DOM 节点类型

从上图部分,我用四种颜色区分了不同节点的类型,每个节点对应的nodeType也是不一致的。

JavaScript(2)---DOM详解

3、DOM 节点操作

节点查询操作

JavaScript(2)---DOM详解

节点增删操作

JavaScript(2)---DOM详解

节点属性操作

JavaScript(2)---DOM详解

二、查询示例

这里通过举例去更好的理解上面的一些操作。

1、查询子元素

children : 可以获取当前元素的所有子元素,它是不包含空白的。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="father">
        <p>今天时间</p>
        <p>2019.12.09</p>
        <p>22:15分</p>
    </div>
</body>
<script>
    window.onload = function () {
        var father = document.getElementById("father");
        var all = father.children; // 获取 father 下边所有的子元素
        console.log("数组的长度为:" + all.length);
    };
</script>
</html>

输出

数组的长度为:3

2、查询父元素

parentNode :获取当前元素的父节点(父元素)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="father">
        <p id="childNode">我是子节点</p>
    </div>
</body>
<script>
    window.onload = function () {
        var p = document.getElementById("childNode");  //获取p元素
        var parent = p.parentNode;  // 获取父元素
        console.log(parent);
    };
</script>
</html>

输出

<div id="father">
        <p id="childNode">我是子节点</p>
 </div>

3、查询兄弟元素

previousElementSibling 获取当前元素的前一个兄弟元素(哥哥元素)
nextElementSibling 获取当前元素的后一个兄弟元素(弟弟元素)

示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p id="previous" name="1111">哥哥元素</p>
    <p id="my">本元素</p>
    <p id="next">弟弟元素</p>
</body>
<script>
    window.onload = function () {
        var my = document.getElementById("my");   // 获取我的元素
        var previous = my.previousElementSibling; // 获取哥哥元素
        var next = my.nextElementSibling;         // 获取弟弟元素
        console.log(previous);
        console.log("---------------------");
        console.log(next);
    };
</script>
</html>

输出

<p id="previous" name="1111">哥哥节点</p>
---------------------
<p id="next">弟弟节点</p>

三、增删改示例

1、增加子节点

appendChild() : 向一个父节点中添加一个新的子节点 父节点.appendChild(子节点);

代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script>
    window.onload = function () {
        // 获取到 btn
        var btn01 = document.getElementById("btn");
        // 添加点击事件
        btn01.onclick = function () {
            // 创建一个 p 标签
            var p = document.createElement("p");
            // 创建一个文本节点
            var txt = document.createTextNode("我是新创建p标签中的内容...");
            // 把文本节点添加到 p 标签中
            p.appendChild(txt);
            // 把 p 标签添加到 body 中
            var body = document.body; // 获取body
            body.appendChild(p);
        };
    };
</script>

<body>
    <button id="btn">创建一个p标签</button>
</body>
</html>

运行

JavaScript(2)---DOM详解

2、移除子节点

removeChild() :删除一个子节点 父节点.removeChild(子节点);

代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn">删除一个子节点</button>
    <ul id="uls">
        <li>我是第一个子节点</li>
        <li>我是第二个子节点</li>
        <li>我是第三个子节点</li>
        <li>我是第四个子节点</li>
    </ul>
</body>
<script>
    window.onload = function () {
        // 获取到 btn
        var btn = document.getElementById("btn");
        // 添加点击事件,删除第三个子节点
        btn.onclick = function () {
            //获取第三个子节点
            var node = document.getElementsByTagName("li")[2];
            // 获取父节点
            var ul = document.getElementById("uls");
            ul.removeChild(node); // 删除子节点
        };
    };
</script>
</html>

运行

JavaScript(2)---DOM详解

3、替换子节点

replaceChild() : 可以使用指定的子节点来替换已有的子节点 父节点.replaceChild(新节点,旧节点);

代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn">替换按钮</button>
    <p id="pNode">我是旧节点 p </p>
</body>
<script>
    window.onload = function () {
        // 获取到 btn01
        var btn = document.getElementById("btn");
        // 添加点击事件
        btn.onclick = function () {
            // 获取p标签
            var p = document.getElementById("pNode");
            // 获取父节点
            var body = document.body;

            //创建一个新的节点,用于替换旧节点
            var a = document.createElement("a");
            var txt = document.createTextNode("我是新的节点 a 哦~");
            a.appendChild(txt);

            // 替换节点
            body.replaceChild(a, p);
        };
    };
</script>
</html>

运行

JavaScript(2)---DOM详解

4、替换指定位置节点

insertBefore() : 可以在指定的子节点前插入一个新的子节点 父节点.insertBefore(新节点,旧节点);

代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn01">替换子节点</button>
    <p id="pNode">我是旧节点 p </p>
</body>
<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件
        btn01.onclick = function () {
            // 获取p标签
            var p = document.getElementById("pNode");
            // 获取父节点
            var body = document.body;

            //创建一个新的节点,用于插入到 p 元素前面
            var a = document.createElement("a");
            var txt = document.createTextNode("我是新的节点 a 哦~");
            a.appendChild(txt);

            // 插入一个新的节点 a 
            body.insertBefore(a, p);

        };
    };
</script>
</html>

运行

JavaScript(2)---DOM详解

四、样式示例

语法

元素.style.样式名 = 样式值

这里有关修改样式注意的点有

1、 如果 CSS 样式名中含有 - 这种名称在JS 中是不合法的,例如: background-color我们需要将这种样式名,修改为 驼峰命名法backgroundColor

2、通过 style 属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS 修改的样式往往会立即显示。
3、但是如果在样式中写了 !important 则此时样式会有最高的优先级,即使通过 JS 也不能覆盖这个样式。此时将会导致 JS 修改的样式失效,所以尽量 不要给样式添加 !important
4、通过 style 读取也都是内联样式、无法读取样式表中的样式。

1、设置样式

代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    /* 设置一个基本的样式 */
    #box{
        width: 100px;  
        height: 100px;
        background-color: darkcyan;
    }
</style>
</head>
<body>
    <button id="btn">更换样式</button>
    <br>
    <br>
    <div id="box"></div>
</body>
<script>
    window.onload = function () {
        // 获取到 btn
        var btn = document.getElementById("btn");
        // 添加点击事件
        btn.onclick = function () {
            // 获取 box
            var box = document.getElementById("box");
            box.style.width = "150px";  // 修改宽度
            box.style.height = "150px";  // 修改高度
            box.style.backgroundColor = "deeppink";  // 修改背景颜色
        };
    };
</script>
</html>

运行

JavaScript(2)---DOM详解

五、综合示例

1、霓虹灯特效示例

先看效果

JavaScript(2)---DOM详解

代码示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body></body>
<script>
        var  tName="北京首都欢迎您";
        var  tLen=tName.length; 
        document.write("<div id='a'  style='font-size:50px;'>"+tName+"</div>" );
        var color=new Array("#FFCC00","#3333FF","FFCCAA","#FF0000","#FFCC33","#CC33FF");
        var ic=0;  //这里很关键,一定要设置全局变量
        function  DColor(){
             var StrName="";  //这个很有必要,不然无法叠加单个汉字
             
             for(var i=0;i<tLen;i++){  //下面一步才是精髓,设置每一个汉子不同颜色,然后拼接起来
                var StrName=StrName+"<font color="+color[ic]+">"+tName.substring(i,i+1)+"</font>";
                ic=ic+1;    //下一个字下一个颜色
                if(ic==color.length){
                  ic=0;  //不设置为零,因为他是全局变量,那么会一直加到数组越界
                }   
             }
             
             a.innerHTML=StrName;  //可以通过id.innerHTML改变界面的字的颜色
                //设置时间的变化 改变情况
            setTimeout("DColor()",200);  //setTimeout代表每隔200毫秒运行一次函数
        }   
        DColor();    //这个代表直接开始运行这个函数,而不用通过触发事件
    </script>
</html>

核心点

核心点一 : 是ic=0写成全局变量,假如写在方法里,那么每一次初始化结果都一样,那么也不会有霓虹灯效果

核心点二 : color.length和tName.length如果相等同样也不会产生效果,因为每一次结束ic还是=0,而这里第一次DColor(),ic=0,第二次调用ic初始值=1,所以会有效果。

2、显示系统时间,秒一直动

效果

JavaScript(2)---DOM详解

代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="showTime()">  <!-- 当加载时就执行 -->
    <label id="show">显示系统时间</label>   <!-- 将系统时间显示在这个位置 -->
</body>
<script type="text/javascript">  
    function showTime(){
      var objDate =new Date(); //得到系统时间对象
      var year =objDate.getFullYear(); //获取年份
      var month=objDate.getMonth()+1;//获取月份
      var date =objDate.getDate();//获取日期
      var hours=objDate.getHours();//小时
      var minutes=objDate.getMinutes();//分钟
      var seconds=objDate.getSeconds();//秒
      var day =objDate.getDay();   //获取星期几
        
        show.innerHTML=""+year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds +"&nbsp;周"+day;   //通过id改变界面显示内容 
        //每隔1秒刷新一次
        var  timeId=setTimeout(showTime,1000);
        }
    </script>
</html>

参考

1、前端学习记录之Javascript-DOM

2、JavaScript DOM

你如果愿意有所作为,就必须有始有终。(21)

相关推荐