DOM操作

最新推荐文章于 2023-04-01 22:19:22 发布
最新推荐文章于 2023-04-01 22:19:22 发布
阅读量225 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43158393/article/details/84953010
版权

目录

 

一、定义

二、查找元素

1、直接查找

2、间接查找

三、节点类型

四、节点关系

五、各种参数列表

1、选择器

2、样式操作方法style

3、表格操作方法

4、表单操作方法

5、元素节点ELEMENT

6、属性节点attributes

7、文本节点TEXT

8、文档节点 Document

9、位置操作方法

六、详细操作

1、内容

2、属性

正反先示例：

3、class操作

4、标签操作

5、样式操作

6、位置操作

7、提交表单

8、定时器

9、弹出框

10、location

 

11、其它（history）

七、事件

1、注册 事件

2、事件列表

实例：

1、跑马灯

2、window对象的方法

3、属性查找

4、模态对话模框

5、onload 和其他的不太一样，他是写在Javascirpt里的，当js放在head里面就很有用了

6、事件传播

7、二级联动

8、输入框

一、定义

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

二、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签　　　获取的是单个标签
document.getElementsByName          根据name属性获取标签集合 注意获取的是一个 ******数组********
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

 

三、节点类型

      节点类型都有NodeType属性来表明节点类型

节点类型描述
1Element代表元素
2Attr代表属性
3Text代表元素或属性中的文本内容。
4CDATASection代表文档中的 CDATA 部分（不会由解析器解析的文本）。
5EntityReference代表实体引用。
6Entity代表实体。
7ProcessingInstruction代表处理指令。
8Comment代表注释。
9Document代表整个文档（DOM 树的根节点）。
10DocumentType向为文档定义的实体提供接口
11DocumentFragment代表轻量级的 Document 对象，能够容纳文档的某个部分
12Notation代表 DTD 中声明的符号。

四、节点关系

nodeType返回节点类型的数字值（1~12）
nodeName元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
nodeValue文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null
parentNode父节点
parentElement父节点标签元素
childNodes所有子节点
children第一层子节点
firstChild第一个子节点，Node 对象形式
firstElementChild第一个子标签元素
lastChild最后一个子节点
lastElementChild最后一个子标签元素
previousSibling上一个兄弟节点
previousElementSibling上一个兄弟标签元素
nextSibling下一个兄弟节点
nextElementSibling下一个兄弟标签元素
childElementCount第一层子元素的个数(不包括文本节点和注释)
ownerDocument指向整个文档的文档节点

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>Aaron</h1>
        </span>
        <p></p>
    </div>
    <script>
        var tT = document.getElementById("t");
        console.log(tT.nodeType,tT.nodeName,tT.nodeValue); //1 "DIV" null
        console.log(tT.parentNode); //<body>...</body>
        console.log(tT.childNodes); //[text, span, text, span#s, text, p, text]
        console.log(tT.children); //[span, span#s, p, s: span#s]

        var sT = document.getElementById("s");
        console.log(sT.previousSibling); //#text, Node 对象形式
        console.log(sT.previousElementSibling); //<span></span>
        console.log(sT.nextSibling); //#text
        console.log(sT.nextElementSibling); //<p></p>
        console.log(sT.firstChild); //#text
        console.log(sT.firstElementChild); //<a></a>
        console.log(sT.lastChild); //#text
        console.log(sT.lastElementChild); //<h1>Aaron</h1>

        console.log(tT.childElementCount); //3
        console.log(tT.ownerDocument); //#document

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

节点关系方法：

hasChildNodes()  包含一个或多个节点时返回true

contains()  如果是后代节点返回true

isSameNode()、isEqualNode()  传入节点与引用节点的引用为同一个对象返回true

compareDocumentPostion()  确定节点之间的各种关系

数值     关系 
1      给定节点不在当前文档中
2      给定节点位于参考节点之前
4      给定节点位于参考节点之后
8      给定节点包含参考节点
16    给定节点被参考节点包含
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>
    <script>
        var tT = document.getElementById("t");
        var sT = document.getElementById("s");


        console.log(tT.hasChildNodes()); //true
        console.log(tT.contains(document.getElementById('s'))); //true
        console.log(tT.compareDocumentPosition(document.getElementById('s'))); //20,因为s被tT包含，所以为16；而又在tT之后,所以为4，两者相加为20.
        console.log(tT.isSameNode(document.getElementById('t'))); //true
        console.log(tT.isEqualNode(document.getElementById('t'))); //true
        console.log(tT.isSameNode(document.getElementById('s'))); //false
    </script>
</body>
</html>

 

五、各种参数列表

1、选择器

getElementById()

一个参数:元素标签的ID
getElementsByTagName()一个参数:元素标签名
getElementsByName()一个参数:name属性名
getElementsByClassName()一个参数:包含一个或多个类名的字符串

classList

返回所有类名的数组

  • add （添加）
  • contains （存在返回true,否则返回false）
  • remove（删除）
  • toggle（存在则删除，否则添加）
querySelector()接收CSS选择符，返回匹配到的第一个元素，没有则null
querySelectorAll()接收CSS选择符，返回一个数组，没有则返回[]

document.getElementById('id')  查找指定的id，然后我们可以进行操作：

<body>
    <div id="id_1">
        123
    </div>
    
    <script type="text/javascript">
        var i = document.getElementById('id_1'); //查找指定的id
        i.innerText = '456'; //innerText修改指定的字符串
    </script>
</body>

显示效果，当我们打开IE的时候123就会被修改为456

下面操作方式也类似：

document.getElementsByName('name')：

<body>
    <div name="name_1">
        123
    </div>

    <script type="text/javascript">
        var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个
        for (var item in i) {
            i[item].innerText = '456'; //innerText修改指定的字符串
        };
    </script>
</body>

document.getElementsByTagName('tagname')

<body>
    <div>
        123
    </div>
    <div>
        234
    </div>
    <script type="text/javascript">
        var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个
        for (var item in i) {
            i[item].innerText = '456'; //innerText修改指定的字符串
        };
    </script>
</body>

 

2、样式操作方法style

style.cssText可对style中的代码进行读写
style.item()返回给定位置的CSS属性的名称
style.lengthstyle代码块中参数个数
style.getPropertyValue()返回给定属性的字符串值
style.getPropertyPriority()检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串
style.removeProperty()删除指定属性
style.setProperty()设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t" style="background-color: yellow; width: 100px; height: 100px">8</div>

    <script>
        var tT = document.getElementById("t");
        console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow;
        tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改属性
        console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow;
        console.log(tT.style.item("0")); //background-color
        console.log(tT.style.length); //3
        console.log(tT.style.getPropertyValue("background-color")); //yellow
        console.log(tT.style.getPropertyPriority("background-color")); //空字符串
        console.log(tT.style.removeProperty("width")); //200px
        tT.style.setProperty("width","200px",""); //设置属性，第三个值为important优先值，可不写
        
    </script>
</body>
</html>

3、表格操作方法

createTHead()

创建<thead>元素，返回引用

deleteTHead()

 删除<thead>元素

createTBody()

创建<tbody>元素，返回引用

insertRow(0)

插入<tr>元素，从0开始

deleteRow(pos)

 删除指定位置的行

insertCell(0)

插入<td>元素，从0开始

deleteCell(pos)

 删除指定位置的单元格

4、表单操作方法

document.forms

获取所有表单

.submit()

提交表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="https://www.baidu.com/s" method="get">
        <input type="text" name="wd" />
        <input type="button" value="百度一下" onclick="this.disable=true;BaiDu(this);" />
    </form>

    <script>
        var form = document.forms;  //获取所有表单
        var formOne = form[0];
        console.log(form);
        console.log(formOne);

        function BaiDu(ths) {
            var inputBaiDu = ths;
            inputBaiDu.parentNode.submit();
        }
    </script>
</body>
</html>

5、元素节点ELEMENT

nodeName访问元素的标签名
tagName访问元素的标签名
createElement()创建节点
appendChild()末尾添加节点，并返回新增节点
insertBefore()参照节点之前插入节点，两个参数：要插入的节点和参照节点
insertAfter()参照节点之后插入节点，两个参数：要插入的节点和参照节点
replaceChild()替换节点，两个参数：要插入的节点和要替换的节点(被移除)
removeChild()移除节点
cloneNode()克隆，一个布尔值参数，true为深拷贝，false为浅拷贝
importNode()从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点)
insertAdjacentHTML()

插入文本，两个参数：插入的位置和要插入文本

  • "beforebegin",在该元素前插入
  • "afterbegin",在该元素第一个子元素前插入
  • "beforeend",在该元素最后一个子元素后面插入
  • "afterend",在该元素后插入

6、属性节点attributes

attributes

获取所有标签属性
getAttribute()获取指定标签属性
setAttribute()设置指定标签属
removeAttribute()移除指定标签属

var s = document.createAttribute("age")

s.nodeValue = "18"

创建age属性

设置属性值为18

 

7、文本节点TEXT

innerText所有的纯文本内容，包括子标签中的文本
outerText与innerText类似
innerHTML所有子节点(包括元素、注释和文本节点)
outerHTML返回自身节点与所有子节点
textContent与innerText类似，返回的内容带样式
data文本内容
length文本长度
createTextNode()创建文本
normalize()删除文本与文本之间的空白
splitText()分割
appendData()追加
deleteData(offset,count)从offset指定的位置开始删除count个字符
insertData(offset,text)在offset指定的位置插入text
replaceData(offset,count,text)替换，从offset开始到offscount处的文本被text替换
substringData(offset,count)提取从ffset开始到offscount处的文本

8、文档节点 Document

document.documentElement代表页面中的<html>元素
document.body代表页面中的<body>元素
document.doctype代表<!DOCTYPE>标签
document.head代表页面中的<head>元素
document.title代表<title>元素的文本，可修改
document.URL当前页面的URL地址
document.domain当前页面的域名
document.charset当前页面使用的字符集
document.defaultView返回当前 document对象所关联的 window 对象，没有返回 null
document.anchors文档中所有带name属性的<a>元素
document.links文档中所有带href属性的<a>元素
document.forms文档中所有的<form>元素
document.images文档中所有的<img>元素
document.readyState两个值:loading(正在加载文档)、complete(已经加载完文档)
document.compatMode

两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启

write()、writeln()、

open()、close()

write()文本原样输出到屏幕、writeln()输出后加换行符、

open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档

9、位置操作方法

document.documentElement.offsetHeight

文档总高度

document.documentElement.clientHeight

文档占当前屏幕高度

document.documentElement.clientWidth

文档占当前屏幕宽度

offsetHeight

自身高度（height + padding + border）

scrollHeight

文档高度（height + padding）

offsetTop

距离上级标签定位高度（magin）

clientTop

border高度（border）

offsetParent

父级定位标签，元素

scrollTop

滚动高度

六、详细操作

1、内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

正反先示例：

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

<button onclick="selectAll()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table border="1px" >
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
     <tr>

        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>

    </tr>
</table>

<script>
    function selectAll() {

        var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i]
            input.checked=true;
        }

    }

    function Cancel() {
         var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i]
            input.checked=false;
        }

    }


    function reverse() {
        var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
             input.checked=!input.checked;

//            if(input.checked){
//                input.checked=false
//            }else {
//                input.checked=true
//            }

        }
    }
</script>

</body>
</html>

3、class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

4、标签操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1,.div2,.div3,.div4{
            width: 300px;
            height: 100px;
        }
        .div1{
            background-color: green;
        }
         .div2{
            background-color: yellow;
        }
         .div3{
            background-color: rebeccapurple;
        }
         .div4{
            background-color: deeppink;
        }
    </style>
</head>
<body>

<div class="div1">
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">
    <button onclick="del()">del</button>
    hello div2
</div>
<div class="div3">
    <button onclick="change()">change</button>
    <p>hello div3</p>
</div>
<div class="div4">hello div4</div>


<script>
    function change() {
        var img=document.createElement("img");//<img src="">
        //img.setAttribute("src","meinv.jpg");
        img.src="meinv.jpg";

        var ele=document.getElementsByTagName("p")[0];
        var father=document.getElementsByClassName("div3")[0];

        father.replaceChild(img,ele)


    }
    function add() {
        var ele=document.createElement("p");//<p></p>
        ele.innerHTML="<h1>hello p</h1>";
        //ele.innerText="<h1>hello p</h1>";
        ele.style.color="red";
        ele.style.fontSize="10px";
        var father=document.getElementsByClassName("div1")[0];
        father.appendChild(ele)

    }

    function del() {
        var father=document.getElementsByClassName("div1")[0];
        var son=father.getElementsByTagName("p")[0];
        father.removeChild(son)

    }


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

5、样式操作

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />

    <script>
        function Focus(ths){
            ths.style.color = "black";
            if(ths.value == '请输入关键字' || ths.value.trim() == ""){

                ths.value = "";
            }
        }

        function Blur(ths){
            if(ths.value.trim() == ""){
                ths.value = '请输入关键字';
                ths.style.color = 'gray';
            }else{
                ths.style.color = "black";
            }
        }
    </script>

6、位置操作

总文档高度
document.documentElement.offsetHeight
  
当前文档占屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距离上级定位高度
tag.offsetTop
  
父定位标签
tag.offsetParent
  
滚动高度
tag.scrollTop
 
/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/

7、提交表单

document.geElementById('form').submit()

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

<form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>


<script>
    var ele=document.getElementById("form1");
    ele.onsubmit=function (e) {
//        console.log("hello")
        alert(1234);

         //return false
        //e.preventDefault()
    }
</script>

</body>
</html>

8、定时器

setInterval多次定时器（毫秒计时）
clearInterval清除多次定时器
setTimeout单次定时器
clearTimeout清除单次定时器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    function f() {
        console.log("hello...")
    }
    var c=setTimeout(f,1000);
//    clearTimeout(c)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>

<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button>


<script>

    function showTime() {
             var current_time=new Date().toLocaleString();
             var ele=document.getElementById("id1")
             ele.value=current_time
    }
    var clock1;
    function begin() {
        if(clock1==undefined){
            showTime();
           clock1=setInterval(showTime,1000)
        }

    }

    function end() {
        clearInterval(clock1);
        clock1=undefined
    }


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

9、弹出框

alert()弹出框
confirm()

确认框

返回值：true、false

prompt()

输入框

两个参数：提示的文本和输入的默认值，返回值：输入的值、""、null

10、location

location.href

location.href = "url"

获取URL

重定向

location.assign()

重定向到URL

location.search = "wd=suoning"

修改查询字符串(百度搜索)

location.hostname

服务主机名，例：www.cnblogs.com

location.pathname

路径，例：suoning

location.port

端口号

location.reload()

重新加载
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="f()">click</button>

<script>
    function f() {
         //location.reload()
        //location.assign("http://www.baidu.com")
        location.replace("http://www.baidu.com")
    }



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

 

11、其它（history）

navigator包含有关浏览器的信息
screen包含有关客户端显示屏幕的信息
history包含用户(在浏览器窗口中)访问过的 URL
window.print();

显示打印对话框

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);
//无参数时，刷新当前页面
history.go()

//后退一页
history.back()
//前进一页
history.forward()

 

七、事件

1、注册 事件

首先了解下面的意思：

事件：比如有一个“按钮”，当你点击的时候发生什么，双击的时候发生什么，这个就叫做事件！

注册：首先这个按钮，当你点击的时候发生的动作，上面的事件要使他出现我们想要的效果，首先得把事件和函数进行绑定，然后把他们注册到指定标签上。

常用事件：

  • onclick  
  • onblur
  • onfocus
  • ..................

举例代码如下：

写一个p的标签，首先把事件和函数进行绑定，当你一点这个按钮的时候就会自动执行，绑定的函数：

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

<div class="v1">
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <p id="p1" onclick="func(this)">pppppp</p>
</div>

<script>
//function func(that) {
//    console.log(that)
//
//    console.log(that.previousElementSibling);
//    console.log(that.parentNode);
//
//}
    
//    var ele=document.getElementById("p1");
//    ele.onclick=function () {
//        alert(123)
//    };

// 事件绑定2
    var ele2=document.getElementsByClassName("v2");


    for(var i=0;i<ele2.length;i++){
        ele2[i].onclick=function () {
            alert(555)
        }
    }
    
</script>
</body>
</html>

2、事件列表

属性
此事件什么时候发生（什么时候被触发
onabort　　　　图象的加载被中断
onblur　　　　元素失去焦点
onchange　　　区域的内容被修改
onclick当用户点击某个对象时调用的事件句柄（比点击p标签时执行上面的代码例子）
ondblclick当用户双击某个对象时调用的事件句柄
onerror　　在加载文档或图像时发生错误
onfocus元素获得焦点
onkeydown某个键盘按键被按下
onkeypress某个键盘按键被按下并松开
onkeyup某个键盘被松开
onload一张页面或一副图片完成加载
onmousedown鼠标按钮被按下 
onmousemove鼠标移动过来后
onmouseout鼠标从某个元素移开
onmouseover鼠标移动到某个元素之上
onmouseup鼠标按键被松开
onreset  重置按钮被点击
onresize 窗口或框架被重新调整大小
onselect 文本被选中
onsubmit 确认按钮被点击
onunload 用户退出页面

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

对于事件需要注意的要点：

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

1、跑马灯

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;//获取title的内容
                console.log(content)
                var firstChar = content.charAt(0)//获取content第一个元素
                console.log(firstChar)
                var sub = content.substring(1,content.length)//获取content字符串剩余的元素
                console.log(sub)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>    
    </body>
</html>

2、window对象的方法

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


<script>
    // window对象的方法
    //alert
    window.alert("hello")
    //confirm
    var ret=window.confirm("hello Yuan");
    console.log(ret)//返回布尔值
    // prompt
    var ret2=window.prompt("hello....")
    console.log(ret2)//接收用户输入的内容


    // open("http://www.baidu.com")

    setInterval(f,1000);

    function f(){
             console.log(666)
    }
</script>
</body>
</html>

3、属性查找

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

<div class="div1">
    <p name="littleP" class="p1">hello p</p>
    <div class="div2">hello div
         <div>div3</div>
         <a href="">click</a>
    </div>
     <span>span</span>
</div>
<span>spanspanspanspan</span>
<div>hhhhh</div>

<script>
//    var ele=document.getElementById()
   var ele=document.getElementsByClassName("p1")[0];

//    console.log(ele)
//    console.log(ele.nodeName);
//    console.log(ele.nodeType);
//    console.log(ele.nodeValue);
//    console.log(ele.innerHTML);
//    ele.innerHTML="hello world"

//    var p_ele=ele.parentNode;
//    console.log(p_ele.nodeName)
//     var b_ele=ele.nextSibling;
//    console.log(b_ele.nodeName);// 为文体节点#text

//     var b_ele2=ele.nextElementSibling;
//    console.log(b_ele2.nodeName);
//    console.log(b_ele2.innerHTML)

//    var ele3=document.getElementsByClassName("div1")[0];
//    console.log(ele3.children[1].children)

    // eg:
//     var ele4=document.getElementsByName("littleP")[0]
//    var ele5=ele4.nextElementSibling;
//    console.log(ele5.innerHTML);
//    console.log(ele5.innerText);
//
//    ele5.innerHTML="<h1>YUAN</h1>";

    //局部查找
     var ele6=document.getElementsByClassName("div1")[0];
     var ele7=ele6.getElementsByTagName("span");
    console.log(ele7[0].innerHTML)
</script>

</body>
</html>

4、模态对话模框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
            background-color: white;
        }

        .shade{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.7;
        }

        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="content">
    <button onclick="show()">show</button>
    hellohellohellohellohellohellohellohellohellohellohellohello
</div>

<div class="shade hide"></div>

<div class="model hide">
    <button onclick="cancel()">cancel</button>
</div>


<script>
    function show() {
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_model.classList.remove("hide");
        ele_shade.classList.remove("hide");

    }

    function cancel(){
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_model.classList.add("hide");
        ele_shade.classList.add("hide");
    }
</script>
</body>
</html>

5、onload 和其他的不太一样，他是写在Javascirpt里的，当js放在head里面就很有用了

    <script>
//        这里的onload是,当整个页面加载完成之后才执行的,整个页面包含的元素加载完成之后才执行的.
        window.onload = function () {
            alert("The page Load complete")
        };
        function edit() {
            var i = document.getElementById('id_1');
            i.className = 'color_red';
        }
        function rollback() {
            var i = document.getElementById('id_1');
            i.className = ''; //这里只要给他设置为空即可
        }
    </script>

6、事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>

<div class="outer" onclick="func2()">
    <div class="inner"></div>
</div>


<script>

    var ele=document.getElementsByClassName("inner")[0];
    ele.onclick= function (e) {
        alert("I am inner!");

        e.stopPropagation()//事件停止向外传播
    };


    function func2() {
        alert("I am outer!")
    }
</script>
</body>
</html>

7、二级联动

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

<select id="provinces">
    <option value="">请选择省份</option>
    <!--<option value="">河北省</option>-->
    <!--<option value="">河南省</option>-->
    <!--<option value="">北京</option>-->
</select>

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



<script>

//    a={name:"alex"};
//    b={"name":"alex"};
//    console.log(a.name);
//    console.log(b["name"]);

//      data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
//    console.log(data);
//    console.log(typeof data);
//    console.log(data["河北省"]);
//    console.log(data.河北省);
//
//      for (var i in data){
//          console.log(i);
//      }


    data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
    var pro_ele=document.getElementById("provinces");
    var city_ele=document.getElementById("citys")

    for(var i in data){
        var ele=document.createElement("option");
        ele.innerHTML=i;
        pro_ele.appendChild(ele)
    }

    pro_ele.onchange=function () {
        console.log(this.selectedIndex);
        console.log(this.options[this.selectedIndex])

        var citys=data[this.options[this.selectedIndex].innerHTML];

        city_ele.options.length=1;

        for(var i=0;i<citys.length;i++){
            var ele=document.createElement("option");
             ele.innerHTML=citys[i];
            city_ele.appendChild(ele)
        }

    }



</script>


</body>
</html>

8、输入框

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>

        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
    </head>
    <body>
        <!--input标签内注注册了两个事件(onfocus/onblur并且事件已经绑定了函数)-->
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
        <script type="text/javascript">
            function Enter(){ //函数Enter的作用,当元素获得焦点就把里面的值设置为空并把颜色设置为黑色
               var id= document.getElementById("tip"); //找到id为tip的标签并赋值给id
               id.className = 'black'; //给id的class设置为black
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               } //判断找到的标签的value='请输入关键里'或者你输入的内容为空
            }
            function Leave(){ //函数Leave的作用,当元素失去焦点就把里面的值设置为"请输入关键字"并把颜色设置为灰色
                var id= document.getElementById("tip"); //找到id为tip的标签病赋值为id
                var val = id.value; //吧id的value属性赋值为val
                if(val.length==0||id.value.trim()==''){
                    id.value = '请输入关键字';
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                } //判断如果val的长度为0,或者用户输入为空字符,吧id的value设置为"请输入关键字"
                  //否则吧id.class设置为black
            }
        </script>
    </body>
</html>

 

 

 

 

 

Aaronpengwp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之DOM常用属性及方法详解
发果叁
10-21 6079
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute(‘属性’)//自己定义的element.setAttribute(‘属性’,‘值’)//主要针对自定义属性removeAttribute(‘属性’)但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。
易语言DOM操作
08-20
易语言DOM操作源码系统结构:易语言DOM操作源码,DOM操作 ======窗口程序集1 || ||------_按钮1_被单击 || ||------_超文本浏览框1_状态文本被改变 || ||------_按钮2_被单击 || ||------_按钮3_被单击 |
DOM窗口操作
在风雨中奔跑
11-04 1003
a1.html a.html 客户id: 客户名称 /** * * vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) * */ functi
document 里面的方法
筱的博客
04-01 1422
document：整个页面querySelector(‘选择器’)：可以按 CSS 的选择器选择方式（选出一个）
标签和Document对象
zhangzongxing_的博客
03-14 182
标签 appendChild 点击按钮，div中添加节点 <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv"> </div> <button onclick="addInput()">点我</button> &lt
关于el-table添加fixed或fixed=“right“无横向滚动条的解决方法
Callme_FanXu的博客
11-07 1670
需要加上浏览器兼容写法webkit，当然也可以对滚动条的样式加以修改，让你的滚动条样式更加美观！
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
javascript DOM 操作.doc
01-15
javascript DOM 操作.doc
DOM操作和jQuery实现选项移动操作的简单实例
10-22
下面小编就为大家带来一篇DOM操作和jQuery实现选项移动操作的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery DOM操作实例
10-26
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
dom操作和JavaScript
12-29
dom操作和JavaScript
jQuery 中DOM 操作详解
10-24
主要介绍了jQuery 中DOM 操作详解,需要的朋友可以参考下
JS DOM 操作实现代码
12-10
简单的表格: 代码如下: <table> <tr> ”TEST”> <input type=”submit” value=”确定”> <input type=”button” value=”取消”> </td> </tr> </table> 经测试: 代码如下: var td= document....
JavaScript中 DOM操作方法小结
10-19
本篇文章主要介绍了JavaScript中 DOM操作方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
display none的元素重新展示如何撑开页面_果冻公开课第八课：如何定位
weixin_39875675的博客
11-24 150
为什么会有position定位 基于定位的常见需求 不同需求的解决方案动画视频：果冻公开课第八课：如何定位？https://www.zhihu.com/video/1101793598399459328文字解析：我们知道每一个元素都是盒子期望布局像搭积木一样从上往下挨个堆盒子就能完成各式各样的页面然而多实现几个页面就会发现文档流中任意一个元素位置调整都会影响到后面的元素简直是牵一发动全身每每扪心自...
iview 表格fixed: ‘right‘，定位错行解决
shikaixina的博客
04-15 1710
弃用fixed方法，手动实现。 配置文件： { title: '操作', slot: 'operate', width: 100, //fixed: 'right', className: 'tableSlotRight' } css： // 解决iview右定位错行问题 /deep/.ivu-table { position: relative; .tableSlotRight { position: sticky; right: 0; .ivu-table-cell {
CSS
weixin_40548182的博客
01-22 435
写一段socket代码 [root@golang ~]# cat /python/web/socket-server.py #!/usr/local/bin/python3 #!coding:utf8 import socket sk=socket.socket() #创建 socket 对象 sk.bind(('192.168.229.120',90)) sk.listen(5) # 等待客户端连接 while 1: conn,addr = sk.accept()# 建立客户端连接
layui中table固定列fixed:‘right‘
qazwsx_edc1的博客
06-09 3379
var tableData1 = [ { "id": 100, "username": "788", "sex": "89", "city": "78%", "sign": "45%", "experience": '56%', "logins": "24%", "wealth": 82830700, "classify": "示范区", "score": 57 }, { "id": 101, "username": "788", "sex": "89",...
dom操作class
最新发布
09-02
DOM操作中的class属性可以通过以下几种方式进行操作： 1. 添加类名：使用`element.classList.add()`方法可以向元素的class属性添加一个或多个类名。例如：`element.classList.add('new-class')`将添加名为"new-class"的类名。 2. 移除类名：使用`element.classList.remove()`方法可以从元素的class属性中移除一个或多个类名。例如：`element.classList.remove('old-class')`将移除名为"old-class"的类名。 3. 切换类名：使用`element.classList.toggle()`方法可以在元素的class属性中切换一个类名的状态。如果类名存在，则移除它；如果不存在，则添加它。例如：`element.classList.toggle('active')`将在"active"类名之间切换。 4. 包含类名：可以使用`element.classList.contains()`方法检查元素的class属性是否包含某个特定的类名。该方法返回一个布尔值。例如：`element.classList.contains('highlight')`将返回true或false，表示"class"属性是否包含"highlight"类名。 5. 替换类名：可以使用`element.classList.replace()`方法替换元素class属性中的一个类名为另一个类名。例如：`element.classList.replace('old-class', 'new-class')`将把"class"属性中的"old-class"替换为"new-class"。 这些DOM操作方法使得我们可以方便地在JavaScript中操作元素的class属性，实现样式的动态变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值