DOM的操作

时间：2019-12-12 23:53:57 阅读：134 评论：0 收藏：0 [点我收藏+]

标签：OLE 包含响应 inf 驱动程序 for 元素对象 elements 事件驱动

DOM操作

1. 什么是DOM

　　 DOM，全称Document Object Model，文件对象模型，通过将HTML文件描述为一个文件树，将HTML文件的全部内容内容描述为树的节点，同过获取和操作DOM对象的节点，完成对HTML文件的操作

技术图片

2. DOM可以做什么？

获取对象
设置元素样式
设置元素属性
动态创建和删除元素
事件的触发响应

3. DOM对象获取

获取document对象

<script>
var odocument = document;            
</script>

获取HTML对象

<script>
        var oHtml = document.documentElement;
        console.log(oHtml);
</script>

获取body对象

<script>
        var oHtml = document.body;  //获得body对象
        console.log(oHtml);
</script>

获取head对象

<script>
        var oHtml = document.head;  //获得head对象
        console.log(oHtml);
</script>

获取body中的元素对象的三种常用方法:
- 通过id获取：

　　　　　　　　document.getElementById(‘xx‘);

- 通过class获取：

　　　　　　　　document.getElementsByClassName(‘xxx‘);

- 通过标签获取：

　　　　　　　　document.getElementsByTagName(‘xxx‘);

4. DOM操作三个步骤

（1）. 获取事件源（获取元素）

（2）. 绑定事件

（3）. 编写事件驱动程序

以div标签的点击事件为例：

<script>
    // 获取事件源
    var oDivs = document.getElementsByClassName(‘box‘);
    for (var i = 0; i < oDivs.length; i++){
        //绑定事件
        oDivs[i].onclick = function () {
                //事件驱动程序
            this.style.width = ‘120px‘;
            this.style.backgroundColor = ‘green‘;
        }
    }
</script>

5. 对标签的操作

（1）对标签的样式进行操作

修改div的背景色的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var oDiv = document.getElementById(‘box‘);
        //修改div的样式
        oDiv.style.backgroundColor = ‘red‘;  //修改div的背景色
    </script>
</body>
</html>

注意：在获取到标签对象obj之后，使用 obj.style.样式属性 对样式进行操作，在CSS中以 ‘-‘ 连接的样式，在JS中改为驼峰式命名，例如 background-color 变为 backgroundColor ，font-size 改为 fontSize

(2) 对标签的属性进行操作

常用标签属性有：

标签class、id、title、type、name等
img的src
a的href

获取属性的方法：

对象.属性名

　　　　oDiv.title //获取div标签的title

　　　　oImg.src //获取img标签的src

　　　　注意:获取类名格式为：obj.className,

　　　　　　获取标签名为：obj.tagName

对象.getAttribute(属性名) 不常用

　　　　OImg.getAttribute(‘src‘) // //获取img标签的src属性

修改标签属性：

ob.属性名 = 属性值
obj.setAttribute(属性名，属性值)

设置img标签的src属性的实例代码如下：

<body>
    <div>
        <img src="../u=3561675411,331850226&fm=26&gp=0.jpg"  id="img1">
    </div>
    <script>
        var oImg = document.getElementById(‘img1‘);
        oImg.onclick = function () {

            //获取DOM属性 this.getAttribute()
            console.log(this.getAttribute(‘src‘));
            //获取DOM属性 this.src
            console.log(this.src);

            //修改src属性
            this.src = "../6451-11122310301335.jpg";
        };
        oImg.onmouseout = function () {
            //通过this.setAttribute() 设置属性
            this.setAttribute(‘src‘, "../u=3561675411,331850226&fm=26&gp=0.jpg");
            //通过this.src设置属性
            this.src = "../u=3561675411,331850226&fm=26&gp=0.jpg"

        }
    </script>
</body>

（3）对值的操作

对值的操作有三种方式：

obj.innerHMTL

　　获取文本 + 标签

obj.innerText

　　只获取文本

<body>
    <div id="box">
        <span>Alex</span>
    </div>
<script>
    var oDiv = document.getElementById(‘box‘);
    //修改div的样式
    oDiv.style.backgroundColor = ‘red‘;
    console.log(oDiv.innerText);   //输出结果为Alex
    console.log(oDiv.innerHTML);   //输出结果为<span>Alex</Alex>
</script>
</body>
</html>

obj.value

　　获取获取单闭合标签的value,例如input的value

<body>
    <div id="box">
        <span>Alex</span>
        <input type="text" id="input1" value="Tom">
    </div>
<script>
    var oInput = document.getElementById(‘input1‘);
    console.log(oInput.value);  //输出为Tom
</script>
</body>

6. 获取元素节点

（1）获取元素的父亲节点

　　obj.parentNode

(2) 获取元素的兄弟节点

获取上一个兄弟节点：

obj.previousSibling	获取上一个兄弟节点，包含所有节点(换行空文本或者标签)
obj.previousElementSibling	获取上一个兄弟节点（标签）

获取下一个兄弟节点：

obj.nextSibling	获取下一个兄弟节点，包含所有节点(换行空文本或者标签)
obj.nextElementSibling	获取下一个兄弟节点（标签）

(3) 获取元素的子节点

obj.firstChild	获取元素第一个子节点（换行空文本或者元素）
obj.firstElementChild	获取元素第一个元素子节点
obj.lastChild	获取元素最后一个子节点（换行空文本或者元素）
obj.lastElementChid	获取元素最后一个元素子节点
obj.childNodes	获取元素所有子节点（换行空文本或者元素）
obj.children	获取元素的所有元素子节点

<body>
    <div id="box1">
        <span>Alex</span>
        <input type="text" id="input1" value="Tom">
    </div>
    <div id="box2"></div>
<script>
    var oBox1 = document.getElementById(‘box1‘);
    var oBox2 = document.getElementById(‘box2‘);

    var oBody = document.body;

    //获取元素的父亲节点
    console.log(oBox1.parentNode);
    //获取元素的兄弟节点
    console.log(oBox2.previousSibling);  //获取上一个兄弟节点， 包含所有节点(换行空文本或者标签)
    console.log(oBox2.previousElementSibling); //获取上一个兄弟节点（标签）

    console.log(oBox1.nextSibling);  //获取下一个兄弟节点， 包含所有节点(换行空文本或者标签)
    console.log(oBox1.nextElementSibling); //获取下一个兄弟节点（标签）

    //获取元素的子节点
    console.log(oBody.firstChild);   //获取元素第一个子节点
    console.log(oBody.firstElementChild); //获取元素第一个元素子节点
    console.log(oBody.lastChild);  //获取元素最后一个子节点
    console.log(oBody.lastElementChild);  //获取元素最后一个元素子节点
    console.log(oBody.children);     //获取元素所有元素节点
    console.log(oBody.childNodes);  //获取元素所有节点
    

</script>

7.创建和增加元素

（1）创建元素

document.createElement(标签名)

（2）添加元素

obj1.appendChild(obj2) 　　--给obj1添加子元素obj2

<body>
    <div id="box1">
        <span>Alex</span>
        <input type="text" id="input1" value="Tom">
    </div>
    <div id="box2"></div>
<script>
    var oBox1 = document.getElementById(‘box1‘);
    var oBox2 = document.getElementById(‘box2‘);
    //创建元素
    var oSpan = document.createElement(‘span‘);
    oSpan.innerText = "Alex";  //修改元素文本内容
    //添加元素
    oBox2.appendChild(oSpan);   
</script>
</body>

8.内容补充

鼠标事件onmouserover, onmouseout 与onmouserenter, onmouserleave之间的区别：

obj.onmouseover	鼠标进入元素和子元素都触发，父子元素切换触发
obj.onmouseout	鼠标离开元素或者子元素触发，父子元素切换触发
obj.mouseenter	鼠标进入元素和子元素触发，父子元素切换不触发
obj.mouseleave	鼠标离开元素或者子元素触发，父子元素切换不触发

鼠标悬浮下拉菜单代码实例：

<body>
    <div class="father">
        <span>菜单</span>
        <div class="child"></div>
    </div>

    <script>
        var oFather = document.getElementsByClassName(‘father‘)[0];
        // .onmouseover() 在进入标签或者子标签会触发(父子标签切换触发)
        oFather.onmouseover = function () {
            var oChild = document.getElementsByClassName(‘child‘)[0];
            oChild.style.display = ‘block‘;
            console.log(111);
        };
        //.onmouseout() 在离开标签或者子标签会触发(父子标签切换触发)
        oFather.onmouseout = function () {
            var oChild = document.getElementsByClassName(‘child‘)[0];
            oChild.style.display = ‘none‘;
            console.log(222);
        };
        //.onmouseenter() 在进入标签或者子标签会触发(父子标签切换不触发)
        oFather.onmouseenter = function () {
            var oChild = document.getElementsByClassName(‘child‘)[0];
            oChild.style.display = ‘block‘;
            console.log(333);
        };
        //.onmouseleave() 在离开标签或者子标签会触发(父子标签切换不触发)
        oFather.onmouseleave= function () {
            var oChild = document.getElementsByClassName(‘child‘)[0];
            oChild.style.display = ‘none‘;
            console.log(444);
        };
    </script>
</body>

DOM的操作

标签：OLE 包含响应 inf 驱动程序 for 元素对象 elements 事件驱动

原文地址：https://www.cnblogs.com/zhangtao1992/p/12030548.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行