zoukankan html css js c++ java

javaScript的DOM操作

DOM概念

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型
在HTML当中，一切都是节点
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
整个html文档就是一个文档节点。所有的节点都是Object　
JavaScript的用途：
1.能够找到页面中的所有HTML元素
2.动态创建和删除元素
3.能够设置页面中的所有属性值
4.能够改变页面中的所有 CSS 样式
5.能够对页面中的所有事件做出反应

查找所有元素

直接查找

1.根据ID获取一个标签 Element

document.getElementById
var tet=document.getElementById("1");
tet.innerText;只显示文本内容
tet.innerText="只要你敢不懦弱，凭什么我们要错过"; #进行修改

2.根据class属性获取注意是Elements。生成的是列表，就算只有一个标签，也是以列表的形式存在的

tet=document.getElementsByClassName("content"); 
tet.innerText;#undefined  tet是个列表，查看文本内容更要有索引
tet；#[div.content, div.content]
tet[1].innerText="只要你敢不懦弱，凭什么我们要错过"; #进行修改

3.根据标签名获取标签合集

document.getElementsByTagName 
tet[0];  #<p>明明就</p> 标签和内容均显示
tet[0].innerText; #"明明就"

间接查找

首先要找到一个标签，然后对其进行父标签和子标签的查找

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

var tet=document.getElementsByClassName("content"); 
tet[0].parentElement;
tet[0].children;  #查到的子标签是数组
tet[0].children[0].innerText;

DOM代码放置位置

DOM相关代码放在script中，script放到body里面的最后位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>DOM相关的代码应该放在哪个位置</title>
    <!--<script>-->
        <!--// 执行到这里的时候 DOM树还没有渲染完成!!!-->
        <!--var d1Ele = document.getElementById("d1");-->
        <!--alert(d1Ele);-->
    <!--</script>-->
</head>
<body>

<div id="d1">我是id为d1的标签!</div>
<script>
    // 我们通常把涉及到DOM操作的JS代码都放在body标签的最下面!!!
    var d1Ele = document.getElementById("d1");
    alert(d1Ele.innerText);
</script>
</body>
</html>

View Code

创建和删除元素

创建节点

createElement(标签名)
var divEle = document.createElement("div");
var app1=document.createElement("span");
app1.innerText="当海不蓝，飞起的梦想都变为尘埃"

添加节点

添加节点：先创建一个节点。然后查找一个标签，将创造的节点放到标签内。
一定要说明创建的节点放到哪个标签内
1.追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
var divele=document.createElement("div"); #创建一个标签 <div></div>
divele.innerText="烽烟起，寻爱似浪淘沙"; 添加内容
var d2ele=document.getElementById("2"); #得到父标签，在id为2的标签中添加divele这个标签
d2ele.appendChild(divele);
d2ele;
<div id="2">
    <div>烽烟起，寻爱似浪淘沙</div>
</div>
2.把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);

删除节点

获得要删除的元素，通过父元素调用删除。
removeChild(要删除的节点)
d2ele.removeChild(divele);

替换节点

somenode.replaceChild(newnode, 某个节点);
var app2=document.createElement("span");
app2.innerText="是我的海";
app.replaceChild(app2,app1);

设置页面中的属性值attribute

<img src="images/1.jpg" class="image-box" >
var app=document.getElementsByTagName("img")[0];

1.获取属性值

app.getAttribute("src") #images/1.jpg
app.getAttribute("class") #image-box

2.设置属性值

如果属性存在就修改，属性不存在，就增加
app.setAttribute("src","images/3.jpg");  #images/3.jpg
app.setAttribute("id","ruby")

3.清除：

divEle.removeAttribute("age")

4.自带的属性还可以直接.属性名来获取和设置

app.id;#2 获取自身的属性 app.id="3" 修改

改变页面中的所有CSS样式

直接对标签内的属性进行操作：
var tet=document.getElementById("1"）;
tet.style.backgroudColor="bule" 该变圆的颜色
tet.style.height="200px" 该变高和宽
tet.style.width="200px"
修改完属性<div id="1" class="c1"></div> 变为 <div id="1" class="c1" style=“backgroud-Color”：“bule”></div>
将改变后的属性都加到标签内，一直生效。直到页面关闭

改变页面中所有的class的操作

1.className  查看某个节点中class的值
2.classList.remove(cls)  删除指定类
3.classList.add(cls)  添加类
4.classList.contains(cls)  存在返回true，否则返回false
5.classList.toggle(cls)  存在就删除，否则添加

<div id="1" class="content test con"></div>
首先找到要操作的标签：var app=document.getElementById("1");
1.app.className;  #"content test con" 查看
app.classList; #["content", "test", "con", value: "content test con"]
2.app.classList.remove("content"); 删除
app.className; #"test con"
3.app.classList.add("jerd"); 添加
app.className; #"test con jerd"

在网页上显示一个圆。通过js控制变颜色

通过增加class和移除class实现。本来时粉色，变颜色，只需要加个c2类即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:50px;
            50px;
            border-radius: 50%;
            background-color: #f807ff;
        }
        .c2{
            background-color: #15eea1;
        }
    </style>
</head>
<body>
<div id="1" class="c1"></div>
<!--用开关来控制-->
<input type="button" id="b1" value="开关" onclick="f1();"> #点击开关，就相当于调用了f（）
<script>
    function f1(){
        var tet=document.getElementById("1");
        tet.classList.toggle("c2")   #c2不存在就创建，就会变色，存在的话就删除，恢复之前按的颜色
    }
</body>
</html>
1.在js中的操作：
var tet=document.getElementById("1"）; 找到圆这个标签
tet.classList.add("c2"); 添加c2 执行后就会变色
tet.classList.remove("c2"); 恢复之前的颜色
2.在页面上添加一个开关，有开关控制

View Code

获取form表单的值 value

适用于form表单中的：.input select textarea 
当用户在网页上输入信息=时，能获得这个值
<form action="">
    <label >用户名：
            <input type="text" id="i1">
        </label>
app=document.getElementById("1")
console.log(app.value);

事件

用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

ondblclick     当用户双击某个对象时调用的事件句柄。
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。

绑定方式

#方式一
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>
#方式二
<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

点击时圆变颜色

'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>事件相关</title>
    <style>
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            border-radius: 50%;
        }
        .c3 {
            height: 100px;
             100px;
            background-color: blue;
            border-radius: 50%;
        }
        .c2 {
            background-color: green;
        }
    </style>
</head>
<body>
<!--方式1-->
<div class="c1" onclick="f1(this);"></div>
<!--方式2-->
<div class="c3"></div>
<input type="button" value="开关">
<script>
    function f1(xx) {
//    xx就是当前标签，为了理解，可以将xx打印出来，查看
     console.log(xx);
     xx.classList.add("c2");
    }
    // 第二种绑定事件的方式 得到的是数组，要用索引
    var c3Ele = document.getElementsByClassName("c3")[0];
    c3Ele.onclick=function () {
        // this指向的是当前操作的标签--> c3Ele
        this.classList.add("c2");
    }
</script>
</body>
</html>
'''

View Code

获取焦点和失去焦点

'''
鼠标在输入框时，默认值消失，不在输入框时有默认值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>搜索框</title>

</head>
<body>
<div>
    <form action="" >
        <label >
            <input type="text" id="i1" value="小米商城">
        </label>
    </form>

</div>
 <script>
         // 找到input标签
    var i1Ele = document.getElementById("i1");
    // 绑定事件
    // 绑定的是获取焦点的事件
    i1Ele.onfocus=function () {
        // 获取焦点之后要做的事儿
        // 把值变成空
        this.value="";
    };
    // 再绑定一个失去焦点的事件
    i1Ele.onblur=function () {
        // this指向的是当前触发事件的input标签
        this.value="小米商城";
    }
 </script>
</body>
</html>
'''

View Code

定时器实例

'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>定时器示例</title>
</head>
<body>

<input type="text" id="i1">

<input type="button" id="stop" value="停止">
<input type="button" id="start" value="开始">
<script>
    var i1Ele = document.getElementById("i1");
    var t;

    // 把当前的时间显示在input框里面
    // 获取当前时间
    //    var now = new Date();
    //    var nowStr = now.toLocaleString();
    // 显示在input框中
    // 找到input标签
    //    var i1Ele = document.getElementById("i1");
    //    i1Ele.value=nowStr;

    function nowTime() {
        // 获取当前时间
        var now = new Date();
        i1Ele.value = now.toLocaleString();
    }

    // 一秒钟设置一次
    t = setInterval(nowTime, 1000);


    var stopEle = document.getElementById("stop");
    stopEle.onclick=function () {
        // 点击停止按钮,让定时器结束
        clearInterval(t);  // 清除的是定时器对象,但是t变量还有值
        t = undefined;  // 手动将t变量置为undefined
    };

    var startEle = document.getElementById("start");
    startEle.onclick=function () {
        // 点击开始按钮,让定时器跑起来
        // 判断:如果原来就有定时器,就不设置新的定时器了
        if (t === undefined){
            // 没有设置定时器
            t = setInterval(nowTime, 1000);
        }
    }
</script>
</body>
</html>
'''

View Code

省市联动

'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>select联动</title>
</head>
<body>

<select name="" id="s1">
    <option value="">请选择省</option>
</select>

<select name="" id="s2">
    <option value="">请选择市</option>
</select>

<script>
    var s1Ele = document.getElementById("s1");
    //要有数据
    var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    // 把data对象里面的key都放到s1下面
    for (var i in data){
        var ele=document.createElement("option");
        s1Ele.appendChild(ele);
         ele.value=i;
//       将key值添加到新建的标签中
         ele.innerText=i;
    }
      s1Ele.onchange =function() {
//        console.log(s1Ele.value)
//          法一：选择省后，查看市里面有没有值，有的话就给删掉。
          var slE = document.getElementById("s2");
            if (slE.children.length>1){
                for (var j=slE.children.length-1;j>0;j--)
        {
           slE.removeChild(slE.children[j])
        }
            }
//            方法二：利用文本属性进行删除，可设置标签 slE.innerHTML为空，这样标签会全部删除
//          slE.innerHTML='<option value="">请选择市</option>';
//            根据相应的省，创建相应的市
         var ret=s1Ele.value;
         for (var a in data[ret]) {
             var ele1 = document.createElement("option");
             slE.appendChild(ele1);
             ele1.innerText =data[ret][a];
         }
}
    // for循环取出key,生成option标签,添加到s1内部

    // 给s1这个select绑定事件 --> onchange事件

//    s1Ele.onchange=function () {
//        // 值发生变化之后要做的事儿
//        // 取到当前s1选中的值,去data中取对应的城市或区
//        // for循环,生成option标签,把它添加到s2中
//
//    }
</script>
</body>
</html>
'''

View Code

查看全文

相关阅读:
打印机常识
 网络禁用和启用，及禁止软件软件访问网络
 局域网高级共享改写
 电脑桌面搬家
 电脑硬件的基本组装
 c#中Linq查询语句
 c#中Lamdba匿名函数查询语句
 C#中静态和非静态的区别
 c#中的面向对象
 Laravel 表单验证规则：required、present、filled 和 nullable

原文地址：https://www.cnblogs.com/zgf-666/p/9223983.html

javaScript的DOM操作

DOM概念

查找所有元素

直接查找

1.根据ID获取一个标签 Element

2.根据class属性获取 注意是Elements。生成的是列表，就算只有一个标签，也是以列表的形式存在的

3.根据标签名获取标签合集

间接查找

DOM代码放置位置

创建和删除元素

创建节点

添加节点

删除节点

替换节点

设置页面中的属性值attribute

1.获取属性值

2.设置属性值

3.清除：

4.自带的属性还可以直接.属性名来获取和设置

改变页面中的所有CSS样式

改变页面中所有的class的操作

获取form表单的值 value

事件

2.根据class属性获取注意是Elements。生成的是列表，就算只有一个标签，也是以列表的形式存在的