• 周五. 12月 9th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

js-DOM操作

admin

11月 28, 2021

####

DOM操作

// DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。
// 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
// HTML DOM 模型被构造为对象的树。
// 根节点就是html,然后分为header和body,header里面有标签以及下面的文本,body里面有各种标签和各自的文本,

// ######################
//DOM标准规定HTML文档中的每个成分都是一个节点(node):
// 文档节点(document对象):代表整个文档
// 元素节点(element 对象):代表一个元素(标签)
// 文本节点(text对象):代表元素(标签)中的文本
// 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
// 注释是注释节点(comment对象) 

// ############################
// JavaScript 可以通过DOM创建动态的 HTML:
// JavaScript 能够改变页面中的所有 HTML 元素
// JavaScript 能够改变页面中的所有 HTML 属性
// JavaScript 能够改变页面中的所有 CSS 样式
// JavaScript 能够对页面中的所有事件做出反应,这是最为常用的,

####

DOM操作-查找元素

// 要操作元素,就要先找到元素,下面讲解如何查找元素

//直接查找
//下面的语句直接输入浏览器的console中就可以执行
document.getElementById(“d1”);
document.getElementsByClassName(“c1”);
document.getElementsByTagName(“p”); //根据标签名字查找

//间接查找
var d3 = document.getElementById(“d3”);
d3.parentElement;

/*

parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

*/

DOM操作-节点操作

//节点操作

//创建节点
var imgEle=document.createElement(“img”);
//增加节点的属性
imgEle.src=”http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg”;
//两种写法一样,

//获取节点
var d1Ele = document.getElementById(“d1”);
// 追加节点(作为最后的节点)
d1Ele.appendChild(imgEle);

// 把增加的节点,放到某一个节点的前面
var d1Ele2 = document.getElementById(“d2”);
var d1Ele3 = document.getElementById(“d3”);
var aEle=document.createElement(“a”);
d1Ele2.insertBefore(aEle,d1Ele3);
aEle.innerText =”点我”;
aEle.href =”http://www.baidu.com”;

//设置自定义的属性
imgEle.setAttribute(“ss”, “ss”);
//获取属性
imgEle.getAttribute(“ss”);
//删除属性
imgEle.removeAttribute(“ss”);

//innerText
d1Ele2.innerText; //后面不写等于号,就是获取这个标签的所有的文本,
d1Ele2.innerText=”hehe”; //有等号,就是把里面设置文本,而且里面的子标签都没有了,所以要找到具体的标签修改,
d1Ele2.innerHTML;//这是获取到下面的标签和文本,里面可以直接写标签,

//删除标签
var d1Ele = document.getElementById(“d1”);
var sonEle = d1Ele.firstElementChild;
d1Ele.removeChild(sonEle);

//替换标签
var d1Ele = document.getElementById(“d1”);
var sonEle = d1Ele.firstElementChild;
var aEle=document.createElement(“a”);
aEle.innerText =”点我”;
d1Ele.replaceChild(aEle,sonEle);

DOM操作-节点操作

###############    JS-DOM操作-获取值操作      ################

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>获取值相关</title>
</head>
<body>

<form action="">
    <label>用户名
        <input name="username" id="i1" type="text">
    </label>
    <label>男
        <input name="gender" value="1" type="radio">
    </label>
    <label>女
        <input name="gender" value="0" type="radio">
    </label>
    <select name="from" id="s1">
        <option value="010">北京</option>
        <option value="021">上海</option>
        <option value="023">重庆</option>
        <option value="022">天津</option>
    </select>
    <textarea id="t1" name="memo" cols="30" rows="10">

    </textarea>
</form>

<script>
    var iEle = document.getElementById("i1");
    console.log(iEle.value);
    var sEle = document.getElementById("s1");
    console.log(sEle.value);
    var tEle = document.getElementById("t1");
    console.log(tEle.value);
</script>

</body>
</html>

###############    JS-DOM操作-class操作      ################

//class的操作

//获取class的值
var divs = document.getElementsByTagName("div"); //这是返回一个数组
divs[0] // 这是取值第一个
divs[0].className; //这是取classname的值,

//移除一个class
divs[0].classList;//这是一个数组,
divs[0].classList.remove("c3"); // 对数组操作,移除一个值就简单了,

//添加一个class
divs[0].classList.add("c4");

//包含判断
divs[0].classList.contains("c4");//是否包含,如果包含就是返回true,

//classList.toggle(cls)  存在就删除,否则添加
divs[0].classList.toggle("c4");


// ##############################
//指定css操作

//可以直接通过改动div的一个style属性来改变颜色
var divs = document.getElementsByTagName("div");
divs[0].style.backgroundColor= "blue";


// JS操作CSS属性的规律:
// 1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

// 2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

对应的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1 {
             200px;
            height: 200px;
            border-radius: 50%;
            background-color: gray;
        }

        .c2 {
            background-color: yellow;
        }

    </style>
</head>
<body>

<div class="c1 c2 c3" onclick="change(this);">div</div>
<script>
    function change(ths){
        ths.classList.toggle("c2");//没有添加,有就删除,就实现了一个颜色的切换,这是绑定了一个点击事件,
    }

</script>
</body>
</html>

###############    JS-DOM操作-绑定事件      ################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1 {
             200px;
            height: 200px;
            border-radius: 50%;
            background-color: gray;
        }

        .c2 {
            background-color: yellow;
        }

    </style>
</head>
<body>

<div class="c1 c2 c3" onclick="change(this);">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>
<div class="c1 c2 c3">div</div>

<input id="i1" type="text">
<input id="start" type="button" value="开始">
<input id="stop" type="button" value="停止">

<input id="i3" type="text" value="裤子">
<input id="search" type="button" value="搜索">
<!--这种是输入框有一个默认值,点击之后默认值还在-->
<!--<input id="i3" type="text" placeholder="娃娃">
placeholder,是默认输入框有一个值,点击之后,这个值还在,
-->


<select id="s1">
    <option value="0">--请选择--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>

<select id="s2"></select>


<script>
    // <!--第一种方式在标签中标记onclick事件-->
    function change(ths) {
        ths.classList.toggle("c2");//没有添加,有就删除,就实现了一个颜色的切换,这是绑定了一个点击事件,
    }

    // 第二种方式,找到元素,然后绑定函数这种好一点
    var divs = document.getElementsByTagName("div");

    for (var i = 0; i < divs.length; i++) {
        divs[i].onclick = function () {
            this.classList.toggle("c2");//没有添加,有就删除,就实现了一个颜色的切换,这是绑定了一个点击事件,
        }
    }


    // 练习,需求:
    // 在input框中显示当前时间
    // 1,获取当前时间,

    var t; //定义一个全局变量,定义一个全局变量就是为了方便后面的函数内部能调用,

    function foo() {
        var now = new Date();
        var nowStr = now.toLocaleString();
        // 2,把时间字符串填入input框中,
        var inputEle = document.getElementById("i1");
        inputEle.value = nowStr;
    }


    //点击开始让这个时间动起来,
    var startButton = document.getElementById("start");
    startButton.onclick = function () {
        //    每隔一秒执行一次
        if (t === undefined) { //判断一下只有没有定时器的时候才会生成,否则不生成,避免连续点击生成多个,
            t = setInterval(foo, 1000);
        }

    }

    //    点击停止,让时间停止
    var stopButton = document.getElementById("stop")
    stopButton.onclick = function () {
        clearInterval(t);//定义一个全局变量就是为了方便这个地方能停止
        t = undefined;//因为上一步是清楚了定时器,但是t这个值还是存在的,所以要重置一下t的值为undefined
    }


    // 现在对输入框做一个事件,
    //点击之后value值消失,光标移除之后value值回来
    var input3 = document.getElementById("i3");

    input3.onfocus = function () {
        this.value = "";//this就是这个input框
    }
    input3.onblur = function () {
        //如何值为空,就把值填回去,不是空的就不要再填回去了,
        if (!this.value) {
            this.value = "娃娃"

        }
    }

    //select联动,

    var data = {1: ["昌平区", "朝阳区", "海淀区"], 2: ["静安区", "闵行区", "浦东区"]};

    //    给第一个select绑定事件,绑定的是onchange事件,当元素内容被改变时触发
    //找到第一个select
    var select1 = document.getElementById("s1");
    //给这个select绑定事件
    select1.onchange = function () {
        //获取是选择的哪一个区
        console.log(this.value);
        //把对应市的区,填入第二个框中,
        var areas = data[this.value];
        //生成option标签,
        var select2 = document.getElementById("s2");
        select2.innerHTML="";//把第二个select框清空,
        for (var i = 0; i < areas.length; i++) {
            var opEle = document.createElement("option");
            //添加到第二个标签中
            opEle.innerText = areas[i];
            select2.appendChild(opEle)
        }
    }
</script>
</body>
</html>

 事件:

//事件是非常重要的,要着重理解,但是后面写的时候我们是使用的jQuery,基本不使用原生的js写

/*

onclick        单击事件,点击的时候触发事件
ondblclick     双击事件

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)


* */

###

####

####

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注