zoukankan html css js c++ java

JavaScript入门学习之四——DOM介绍及常用方法

在前面我们学习了JavaScript的基本语法，紧靠这些代码我们还无法实现浏览器的交互。也就是说我们还不能做出来平时常见到的网页交互。下面就需要引入一个新的知识点，也就是这一章要讲的：DOM。

BOM——Browser Object Module，是指浏览器对象模型。通过这个模型可以实现JavaScript和浏览器之间的对话，包括后面要学习的DOM，可以访问Html中的所有文档中的元素。

window对象

所有的浏览器都支持window对象，他表示浏览器窗口。所有的JavaScript全局对象，函数以及变量均自动成为window对象的成员。全局变量是window对象的属性，而全局函数是window对象的方法，我们可以这样试一下：

var name = 'test';
function fun(){
    console.log('in fun');
}

console.log(window.name)
window.fun()

常用window对象的方法

window.innerHeight  //浏览器窗口内部高度
window.innerWidth   //浏览器窗口内部宽度
window.open()       //打开新页面
window.close()      //关闭页面

window的子对象

navigator对象

浏览器对象，通过该对象可以判定用户所使用的浏览器，包括浏览器相关信息。但是浏览器会伪造这些信息，获得的信息有可能不太准确。了解即可。

navigator.appName       //Web浏览器全称
navigator.appVersion    //Web浏览器厂商和版本的详细字符串
navigator.userAgent     //客户端绝大部分信息
navigator.platform      //浏览器所在的操作系统

screen对象

屏幕对象，一般用来获得屏幕显示的信息，不是特别常用

screen.availHeight      //可用屏幕高度
screen.availWidth       //可用屏幕宽度

history对象

history对象包含了浏览器的历史，但是我们无法看具体的地址，只可以简单的用来进行前进或后退一个页面的切换功能。

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

location对象

location对象用于获得当前页面的URL或者把浏览器重新定向到新的页面

location.href           //获取当前页面的URL
location.href="URL"     //转到指定的URL页面
location.reload()       //重新加载当前页面

弹出框

警告框

警告框用于确保用户可以得到某些信息，当警告框出现以后，用户必须点击确定按钮以后才可以进行操作。

alert('警告信息')

确认框

确认框常用于使用户可以验证或接受某些信息。当提示框出现后，用户必须点击确认后取消才可以继续操作。并且如果用户点击的是确认，则返回值为true，否则返回值为false。

confirm('是否年满18周岁‘)

提示框

常用于提示用户在进入页面前输入某个值。当鱼鱼输入完信息后点击确认则返回信息字符串，否则返回null

prompt('请在下方输入答案')

计时事件

我们可以使用下面的计时器来实现延时执行代码的过程(定时事件)

单次触发的事件

语法

var timerID = setTimeout('JS语句',毫秒值)

setTimeout()方法会返回一个值，在上面的语句中，这个值被存储在timerID这个变量里，如果我们想要取消定时器的这个事件，可以通过这个变量名来操作

clearTimeout(timerID)

setTimeout()方法里的第一个参数是一个语句的字符串，注意一定是字符串，

var t = setTimeout('alert(123)',5000)

或者是直接调用一个函数(函数就不用加引号了)

function fun(){
    console.log(123);
}

var timer1 = setTimeout(fun,5000)

周期性触发的事件setInterval()

setInterval是用来按照指定的周期来调用函数或表达式的方法，该方法会不停的调用函数，知道调用clearInterval()方法或窗口被关闭，同样，定时器返回的值可以作为定时器ID使用。具体的语法和上面的setTimeout()一样。

DOM

DOM是一套对文档内容进行抽象和概念化的方法，当网页被加载的时候，浏览器会创建页面的文档模型(Document Object Model)，然后HTML DOM模型会被构造为对象的树。

HTML DOM树

下面的结构就是HTML DOM的树形结构

DOM标准规定HTML文档中每个成分都是一个节点(node),分为下面几种：

文档节点(document对象)：代表了整个文档
元素节点(element对象)：代表一个元素(标签)
文本节点(text对象)：代表标签中的文本
属性节点(attribute对象)：代表一个属性，只有元素才有属性
注释节点(comment对象)：注释

JavaScript可以通过DOM创建动态的HTML：

JavaScript可以改变页面中所有HTML元素
JavaScript可以改变页面中所有HTML属性
JavaScript可以改变页面中所有CSS样式
JavaScript可以对页面中所有事件做出反映

查找标签

直接获取标签

可以通过下面的代码查找标签

document.getElementById()             //根据ID获取标签
document.getElementsByClassName()     //根据class获取标签
document.getElementsByTagName()       //根据标签名获取标签(p标签就用'p',div就用'div')

结合下面的页面代码可以试一下

<body>
    <div id="1" class="c1">1</div>
    <div id="2" class="c1">2</div>
    <div id="3">3</div>
</body>

>document.getElementById('1')
<<div id="1" class="c1">1</div>
>document.getElementsByClassName('c1')
<HTMLCollection(2) [div#1.c1, div#2.c1]
>document.getElementsByTagName('div')
<HTMLCollection(3) [div#1.c1, div#2.c1, div#3]

间接查找

除了上面直接定位到要求的标签意外，还可以间接的定位标签

document.parentElement              //获取父级标签元素
document.children                   //获取所有子标签（列表）
document.firstElementChild          //获取第一个子标签元素
document.lastElementChild           //获取最后一个子标签元素
document.nextElementSibling         //获取下一个标签元素
document.previousElementSibling     //获取上一个标签元素

结合html文件看看是怎么用的

<body>
    <div id="1">1
        <div class = '4'>'div1里面的第一个div'</div>
        <div class = '5'>'div1里面的第二个div'</div>
        <div class = '6'>'div1里面的第三个div'</div>
        <div class = '7'>'div1里面的第四个div'</div>
    </div>
    <div id="2">2</div>
    <div id="3">3</div>
</body>

>var d1 = document.getElementById('1')
<undefined
>d = d1.children
<HTMLCollection(4) [div.4, div.5, div.6, div.7]
>d1.firstElementChild
<<div class="4">'div1里面的第一个div'</div>
>d1.lastElementChild
<<div class="7">'div1里面的第四个div'</div>

其他几个的用法也都差不多。不再多说。

节点操作

创建节点createElement

var d_new = document.createElement('div')

插入节点

节点创建以后要插入到相应的位置中，可以用append和insert两种方法

append为追加到最后一个标签后
insert为插入到指定标签前面。

var d1 = document.getElementById('1')
var d_new = document.createElement('div')
d_new.style='background-color:red;'
d_new.textContent = '1234567'
d1.append(d_new)

这里用的是append，就是在最后添加一个标签效果就是下面的

而插入的语法是insertBefore(新标签,原标签)

var d1 = document.getElementById('1')
var dd1= d1.firstChild
console.log(dd1)
var d_new = document.createElement('a')
d_new.href = 'http://www.baidu.com'
d_new.innerText = '百度'
d1.insertBefore(d_new,dd1)

出来的效果

删除节点

可以直接删除元素或者删除父元素下的某个子元素

//结构如下：
d1
    dd1
    dd2
d2

dd1.remoce()            //删除dd1
d1.removeChild(dd1) //删除d1下的子元素并将其作为返回值返回

替换节点

语法

somenode.replaceChild(newcode,被替换的节点）

设置属性

内置属性的设置比较简单，直接用

元素.属性名 = "属性值"

但是要注意的是自定义的属性只能用下面几个方法

.setAttribute("属性名","属性值")
.getAttribute("属性名")
.removeAttribute("属性名")

没啥说的，直接看名字应该就明白怎么用。

文本操作

纯文本操作

纯文本内容，也就是只获得标签内部的字符文本，不包括标签

标签对象.innerText=''        //设置标签内容文本
标签对象.innerText            //获取标签内容文本

我们就按下面的html代码来看看

<body>  
    <div id="1">
        <div class = '4'>'div1里面的第一个div'</div>
        <div class = '5'>'div1里面的第二个div'</div>
        <div class = '6'>'div1里面的第三个div'</div>
        <div class = '7'>'div1里面的第四个div'</div>
    </div>
    <div id="2">2</div>
    <div id="3">3</div>
</body>
还是上面的html文件，

先定义两个变量

var d1 = document.getElementById('1')
var dd1= d1.firstElementChild

如果是下面的方法

d1.innerText

结论就是这样的

html文本操作

区别于上面的纯文本，我们还可以通过下面的方法获取html文本

元素.innerTHML                                //获取html文本
元素.inneHTML="<H1>新的文本</H1>"　　　　　　　　//直接写新的html文本

还是上面的代码，看看下面的例子

获取值的操作

下面几种标签在交互时是需要获取值的

input
select
textarea

我们先建立一个注册界面，html代码放在下面

<body>
    <form action="">
        <label>用户名
            <input type="text" name="username">
        </label>
        
        <label>密码
            <input type="password" name="pwd">
        </label><br>
        <label>男
            <input type="radio" name="gender" value="1">
        </label>
        <label>女
            <input type="radio" name="gender" value="0">
        </label><br>
        <label>籍贯
            <select name="from" id="">
                <option value="010">北京</option>
                <option value="021">上海</option>
                <option value="022">天津</option>
                <option value="024">重庆</option>
            </select><br>
        </label>
        <label>备注
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </label>
    </form>
</body>

登录界面body部分

class的操作

我们可以直接对一个元素class的子进行操作,比方我们有下面的一个d1（返回值是个列表），class的值为c1,c2,c3

<div class="c1 c2 c3"></div>

var d1 = document.getElementsByTagName('div')

那就可以通过下面的方式进行操作

d1[0].className   //返回字符串"c1 c2 c3"
d1[0].className = 'c11   //将d1[0]的class设置为‘c11’
d1[0].classList    //返回值为DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
d1[0].classList.remove('c1')    //删除c2
d1[0].classList.add('c1')        //添加类
d1[0].classList.contains('c2')   //检查是否有’c2’这个类，存在返回true，否则返回false
d1[0].classList.toggle('c3')    //检查是否有c3这个类目，存在则返回false并将该值删除，不存在返回true并将该值添加到列表内

指定CSS的操作

下面的代码指定了如何对CSS进行操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律

1.对于没有中横线的CSS属性一般可以直接用style.属性名就可以，比如

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

2.对于中间含有CSS的属性，将中横线后面的第一个字母换成大写即可，比如

background-color--->obj.style.backgroundColor

这些我们只做一个了解，在学了后面的JQuery以后是通过JQuery来操作的。

事件

HTML4.0以后版本新加了事件触发浏览器中的动作(action)，比方当用户点击了某个html元素以后启动一段JavaScript。

常用事件

下面这个事件属性列表，这些属性可以插入HTML标签来定义事件动作

onclick         //点击事件
ondblclick      //双击事件
onfocus         //元素获得焦点
onblur          //元素失去焦点
onchange        //域的内容被改变
onkeydown       //某个键被按下
onkeypress      //某个键被按下并松开
onkeyup         //某个键被松开
onload          //页面或图片加载完成
onmousedown     //鼠标键按下
onmousemove     //鼠标移动
onmouseout      //鼠标从元素移开
onmouseover     //鼠标移动到某元素上
onselect        //文本框中的文本被选中
onsubmit        //确认按钮被点击，使用对象是form

事件列表

有了事件，还要把事件和对应的函数进行绑定，先看看下面的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    .c1{height: 200px;
    width: 200px;
    border-radius:50%;
    background-color: red;}
    .c2{height: 200px;
    width: 200px;
    border-radius:50%;
    background-color: green;}
</style>

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

<script>
    function change(ths){
        ths.classList.toggle('c2')
    }
</script>
</body>
</html>

鼠标点击事件

事件绑定函数方式

方式一：

<div onclick="fun();">

</div>

<script>
    function fun(){}
</script>

这里有个非常重要的知识点——实参this(可以看上面的案例)表示触发事件的当前元素，有些类似Python类里的self。而后面函数定义的时候的ths是形参。

方式二

第二种方式直接放一个例子吧，不抽象出来了

<div class="c1 c2"></div>
<div class="c1 c2"></div>
<div class="c1 c2"></div>
<div class="c1 c2"></div>


<script>
    function change(ths){
        ths.classList.toggle('c2');
    }

    var divEles = document.getElementsByTagName('div');

    for (var i=0;i<divEles.length;i++){
        divEles[i].onclick=function(){
            this.classList.toggle("c2");

        }
    }
</script>

这种方式是用遍历列表的方式来对函数进行绑定。

案例分析

案例一：定时器使用

定时器使用，设置一个按钮和文本框，点击按钮后开始显示时间，并且每一秒对时间进行刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器练习</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" id="b1" value="开始" onclick="startTimer()">
<input type="button" id="b2" value="停止" onclick="stopTimer()">
<script>
    //声明一个全局变量用来保存定时器ID
    var timer;
//在input框内显示当前时间
    function showTime(){
        var nowTime = new Date();
        var nowTimeStr = nowTime.toLocaleTimeString()

        var i1Ele = document.getElementById('i1')
        i1Ele.value = nowTimeStr;   
    }

//点击开始按钮使时间动起来
    function startTimer(){  
        //用if判断是否有定时器存在，防止开始按钮被点击两下后存在多个定时器，但停止按钮每次只停止最后一个
        if (timer === undefined){
          timer = setInterval(showTime,1000)  
        }
        
        
    }
    function stopTimer(){
        clearInterval(timer)
        timer = undefined       //清除timer的id，注意timer对应的ID还存在，只是改变了id里的值，配合前面的if使用
        console.log(timer)
    }
</script>
    
</body>
</html>

定时器

案例二：搜索框

淘宝、京东的搜索框一般都有个默认的被搜索对象，如果获取焦点以后就会变成空白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索框案例</title>
</head>
<body>
<input type="text" id="i1" value="Uniqlo">


<script>
    var d1Ele = document.getElementById('i1');
    d1Ele.onfocus = function(){
        this.value='';
    }
    d1Ele.onblur = function(){
        if(!this.value.trim()){
            this.value = 'Uniqlo'
        }
    }
</script>
</body>
</html>

搜索框

案例三：select联动

需求：第一集select为省份，第二级select为城市，选择第一级以后第二级会随动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>select联动</title>
</head>
<body>
<select name="" id="s1">
    <option value="">--请选择--</option>
    <option value="0">陕西</option>
    <option value="1">河南</option>
</select>

<select name="" id="s2">
    <option value="">--请选择省份--</option>
</select>
<script>
    var data = {0:["西安","宝鸡","咸阳","延安"],1:["郑州","开封","洛阳"]}
    //给s1绑定事件
    var s1Ele = document.getElementById('s1');
    var s2Ele = document.getElementById('s2')
    s1Ele.onchange=function(){
        //先删除s2里的option标签
        s2Ele.innerHTML = ""
        //获取值（省份），把对应的城市放在s2里
        var areas = data[this.value];
        

        for (var i=0;i<areas.length;i++){
            var opEle = document.createElement("option");        //创建option标签
            opEle.innerText = areas[i];
            s2Ele.append(opEle);        //把新建的标签添加到s2里

            }
    }


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

联动select标签

查看全文

相关阅读:
Spring-Cloud之Feign
Spring-Cloud之Ribbon原理剖析
 Spring-Cloud之Ribbon
Spring-Cloud之Eureka
显示列表
 顶点缓存对象（VBO）
OpenGL观察轴
 OpenGL顶点数组
 OpenGL投影矩阵
 OpenGL变换

原文地址：https://www.cnblogs.com/yinsedeyinse/p/12096227.html