zoukankan html css js c++ java

JS DOM window.document对象

一、获取对象：

　　获取id：document.getElementByid("对应的id");只能返回一个对象。因为id是唯一的

　　获取classs：document.getElementsByClassName("对应的class")；很多个取到的事数组就算是一个也是数组。可以用索引取

　　获取Name:document.getElementsByName("对应的Name");和class一样

　　获取元素：document.getElementsByTagName("对应的元素");和class一样

二、操作对象属性：

　　　　1、添加属性：

　　　　　　对象.setAttribute("属性名", "属性名的值");

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .di {
        background-color:red;
        
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="按钮1"id="btn1";/>
    </div>
    </form>
</body>
</html>
<script>
    document.getElementById("btn1").onclick=function(){//点击btn1发生
        var oBtn1 = document.getElementById("btn1");//获取到btn1返回给oBtn1
        oBtn1.setAttribute("disabled", "disabled");//点击btn1给按钮添加disabled="disabled";括号内（“属性名”，“属性名的值”）
        oBtn1.setAttribute("class", "d1");//点击btn1给按钮添加class="d1";
    }

</script>

　　　　2、移除属性：

　　　　　　对象.removeAttribute("要移除的属性名");

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .di {
        background-color:red;
        
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="按钮2"id="btn2" disabled="disabled";/>//默认不可用
    
     <input type="button" value="按钮1"id="btn1" /></div>
    </form>
</body>
</html>
<script>
    document.getElementById("btn1").onclick=function(){//点击btn1发生
        var oBtn2 = document.getElementById("btn2");//获取到按钮2的对象
        oBtn2.removeAttribute("disabled");//移除按钮2的disabled让按钮2 可用  只写属性名连属性值一起去掉
    }

</script>

　　　　3、获取属性的值：

　　　　　　　　对象.getAttribute("属性名")

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .di {
        background-color:red;
        
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="按钮2"id="btn2" disabled="disabled";/>//默认不可用
    
     <input type="button" value="按钮1"id="btn1" /></div>
    </form>
</body>
</html>
<script>
    document.getElementById("btn1").onclick=function(){//点击btn1发生
        var oBtn2 = document.getElementById("btn2");//获取到按钮2的对象
        oBtn2.removeAttribute("disabled");//移除按钮2的disabled让按钮2 可用  只写属性名连属性值一起去掉
        alert(oBtn2.getAttribute("disabled"));//获取按钮2里面的disabled的属性值并弹出来
    }

</script>

三、操作对象内容
　　　　1、针对普通元素

　　　　　　（1）添加内容

　　　　　　　　　　　　对象.innerHTML=“” /对象.innerText ="";如果添加的事元素TEXT会原封不动的读出来/HTML会被解析出来只能加一个追加的话+=

　　　　　　（2）移除内容

　　　　　　　　对象.innerHTML=“” /对象.innerText ="";等于空

　　　　　　（3）获取内容

　　　　　　　　对象.innerHTML/对象.innerText 如果是元素HTML会把元素也获取出来TEXT只把元素之间的内容获取出来

　　　　2、针对表单元素

　　　　　　（1）添加内容

　　　　　　　　对象.value="内容";

　　　　　　（2）移除内容

　　　　　　　　对象.value="";

　　　　　　（3）获取内容

　　　　　　　　对象.value

四、操作对象样式　　

　　　　1、添加样式

　　　　　　对象.style.width/height/backgroundColor=“值”；

　　　　2、获取样式

　　　　　　对象.style.width/height/backgroundColor 只能获取内嵌的样式

　　　　3、实时获取

　　　　　　对象.offsetHeight

五、操作相关元素

　　　　获取同辈的下一个/上一个

　　　　　　对象.nextSibling/previousSibling 换行和空格会被获取出来　　

　　　　获取父辈

　　　　　　对象.parentNode.getAttribut("id")获取父级的的id

　　　　获取子级

　　　　　　对象.childNodes.length获取一共几个子级

　　　　　　对象.childNodes.[0].getAttribut("id")

六、创建删除元素

 var a = document.createElement("a");//创建一个a标签
    a.innerText = "百度";
    document.getElementById("div1").appendChild(a)//获取到div1  将创建的a标签添加到div1的子级
    a.remove;//删除a标签  找到父级才能删除

七、事件　　

　　常用　

·　　　　对象.onclick 单击

　　　　对象.onmouseover/onmouseout 鼠标移入/移除

　　　　对象.onkeyup 按键抬起

　　　　对象.onfous/onblur 得到/失去焦点

　　不常用　　　

　　　　对象.ondblclick 双击

　　　　对象.onmousemove 鼠标移动

　　　　对象.onchange

　　　　对象.onkeydown 按键按下

　　　　对象.onkeypress

八、正则表达式

　　/正则/.test(要对比的字符串)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .di {
        background-color:red;
        
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="text"id="txt1" />
        <span id="sp1" style="color:red"></span>
        </div>
    </form>
</body>
</html>
<script>
    document.getElementById("txt1").onkeyup = function () {
        var osp1 = document.getElementById("sp1");
        if (/正则表达式/.test(this, value)) {
            sp1.innerHTML = "正确";
            sp1.style.color = "green";
        } else {
            sp1.innerHTML = "格式输入有误";
            sp1.style.color = "red";
        }
    }
</script>

查看全文

相关阅读:
MySql.Data.dll的版本
 发现一个“佛系记账本”
坚果云无法同步SVN文件夹
 Kali Linux打开多个终端窗口
 修改Kali Linux终端主题
 Kali Linux搜索软件包
 指定无线网卡监听信道
 解决Aireplay-ng信道问题
 查看干扰进程
 使用Kali官网提供的虚拟机系统

原文地址：https://www.cnblogs.com/skyhorseyk/p/7357096.html