当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 前端基础之BOM和DOM操作

前端基础之BOM和DOM操作

2019年11月20日  | 移动技术网IT编程  | 我要评论

目录

bom和dom定义

bom（browser object model）是指浏览器对象模型，使javascript有能力于浏览器进行对话

dom（document object model）是指文档对象模型，通过它，可以访问html文档的所有元素

由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

windows对象

所有浏览器都支持window对象，表示浏览器窗口

一些常用的window方法：

  • window.innerheight - 浏览器窗口的内部高度
  • window.innerwidth - 浏览器窗口的内部宽度
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口

windows的子对象

navigator.appname　　// web浏览器全称
navigator.appversion　　// web浏览器厂商和版本的详细字符串
navigator.useragent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象

screen.availwidth   // 可用的屏幕宽度
screen.availheight   // 可用的屏幕高度

history对象

浏览器历史对象，包含了用户对当前页面的浏览历史

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

location对象

window.loaction对象用于获得当前页面的地址（url），并把浏览器重定向到新的页面

常用的属性和方法：

location.href   // 获取url
location.href="url"  // 跳转到指定页面
location.reload()  // 重新加载页面

弹出框

可以在javascript中创建三种消息框：警告框、确认框、提示框

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

alert('can you see?')

确认框

用于使用户

confirm('are you ok?')

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

prompt('请输入你的答案')

计时相关

通过使用js，可以在一定间隔后来执行代码，而不是在函数被调用后立即执行。我们称之为计时时间

settimeout()

语法：

var t=settimeout("js语句",毫秒)

例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
<script>
    function func() {
        alert('hello world!')
    }
    settimeout(func, 3000)
</script>

</body>
</html>

cleartimeout()

// 在指定时间之后执行一次相应函数
var timer = settimeout(function(){alert(123);}, 3000)
// 取消settimeout设置
cleartimeout(timer);

setinterval()

上面的方法只是设置了一次定时器，setinterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。它会不停地调用函数

function func() {
        alert('hello world!')
    }

setinterval(func, 3000)  //每隔三秒钟执行一次

clearinterval()

可取消由setintertval()设置的timeout

例子

    function func() {
        alert('hello world!')
    }
    function show() {
        var t = setinterval(func, 3000);   // 每隔3秒执行一次
        function inner() {
            clearinterval(t)
        }
        settimeout(inner, 9000)
    }
    show()

// 每隔3秒弹框一次，3次之后就不在弹框了

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     // 根据标签名获取标签合集

注意：通过标签和class查找的结果是数组，通过id获得的是对象本身

间接查找

parentelement            父节点标签元素
children                 所有子标签
firstelementchild        第一个子标签元素
lastelementchild         最后一个子标签元素
nextelementsibling       下一个兄弟标签元素
previouselementsibling   上一个兄弟标签元素
var pele = document.getelementbyid('d1')   // 注意变量的命名
pele.parentelement


var divele = document.getelementsbyclassname('c1')[0]  // 注意通过class查找结果是数组，要加0取索引

节点操作

创建节点

var divele = document.createelement("div");

添加节点

somenode.appendchild(newnode)；   // 追加一个子节点（作为最后的子节点）

somenode.insertbefore(newnode,某个节点);   // 把增加的节点放到某个节点的前边

删除节点

somenode.removechild(要删除的节点)

替换节点

somenode.replacechild(newnode, 某个节点);

属性节点

获取文本节点的值

var divele = document.getelementbyid("d1")
divele.innertext
divele.innerhtml

设置文本节点的值

var divele = document.getelementsbyclassname('c1')[0]
divele.innertext = '我很善良'
divele.innerhtml = '好好学习'
divele.innerhtml = '<b>好好学习</b>'

attribute操作

var divele = document.getelementbyid("d1");
divele.setattribute("age","18")  // 设置属性
divele.getattribute("age")     // 获取属性
divele.removeattribute("age")   // 删除属性

// 自带的属性还可以直接.属性名来获取和设置
imgele.src
imgele.src="..."

获取值操作

适用于以下标签：

  • .input
  • .select
  • .textarea
var iele = document.getelementbyid('d1')
iele.value   // 获取input内部用户输入的内容，通过.value的形式获取值，支持实时更新

class操作标签类属性

var divele = document.getelementsbytagname('div')[0]

divele.classlist   // 获取所有样式类名

divele.classlist.remove(cls)  // 删除指定类
divele.classlist.add(cls)  // 添加类
divele.classlist.contains(cls)  // 存在返回true，否则返回false
divele.classlist.toggle(cls)  // 存在就删除，否则添加

css样式操作

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

事件

当符合某个条件下，自动触发的动作/响应

常用事件

onclick        // 当用户点击某个对象时调用的事件句柄。
ondblclick     // 当用户双击某个对象时调用的事件句柄。

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

onkeydown      // 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     // 某个键盘按键被按下并松开。
onkeyup        // 某个键盘按键被松开。
onload         // 一张页面或一幅图像完成加载。
onmousedown    // 鼠标按钮被按下。
onmousemove    // 鼠标被移动。
onmouseout     // 鼠标从某元素移开。
onmouseover    // 鼠标移到某元素之上。

onselect      // 在文本框中的文本被选中时发生。
onsubmit      // 确认按钮被点击，使用的对象是form。

绑定方式

方式1：

<button onclick="func()">按钮</button>

<script>
    function func() {
        alert('我被点击了')
    }
</script>



<div id="d1" onclick="changecolor(this);">点我</div>
<script>
  function changecolor(ths) {
    ths.style.backgroundcolor="green";
  }
</script>

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式2：

<script>
    var i1ele = document.getelementbyid('d1');
    i1ele.onclick = function () {
        // i1ele标签被点击之后 能做的事
        func()
    };

    function func() {
        alert('我被点击了')
    }
</script>

推荐使用第二种

如何解决js代码运行报错的情况

html代码运行至上而下

  • 方式1
利用onload等待某个对象加载完毕之后再执行
  • 方式2
直接将你的js代码写在body最下方

事件实例

点击变色

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        .c1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_green bg_red"></div>
<button id="d1">变色</button>

<script>
    var btnele = document.getelementbyid('d1');
    btnele.onclick = function () {
        // 找到div标签
        var divele = document.getelementsbyclassname('c1')[0];
        // 修改类属性  有则删除，无则添加
        divele.classlist.toggle('bg_green')
    }
</script>
</body>
</html>

获取焦点实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
<input type="text" value="python开发" id="d1">
<script>
    var iele = document.getelementbyid('d1');
    // input框获取焦点
    iele.onfocus = function () {
        // 将input框文本值清楚
        iele.value = ''
    };
    // input框失去焦点
    iele.onblur = function () {
        iele.value = '欢迎下次再来～'
    }
</script>
</body>
</html>

展示当前事件

<!--input框显示事件1秒1秒走-->

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
    // 先定义一个全局变量 用来存储定时器
    var t = null;

    var b1ele = document.getelementbyid('b1');
    var b2ele = document.getelementbyid('b2');

    var iele = document.getelementbyid('d1');
    function showtime() {
        var currenttime = new date();
        var ctime = currenttime.tolocalestring();
        iele.value = ctime
    }
    // 开始按钮
    b1ele.onclick = function () {
        t = setinterval(showtime, 1000)
    };
    // 结束按钮
    b2ele.onclick = function () {
        clearinterval(t)
    }  // 但是有个问题：当点击多次开始，点击结束按钮不能停止。原因就是点击多次开始，就生成了多个定时器，而 这里的t值得是最后一个定时器，前面的定时器还开着呢

</script>

</body>
</html>

省市联动

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
<select name="" id="d1">省:
<!--    <option value="">&#45;&#45;请选择&#45;&#45;</option>-->
</select>
<select name="" id="d2">市</select>

<script>
    var s1ele = document.getelementbyid('d1');
    var s2ele = document.getelementbyid('d2');

    var data = {
        '河北省': ['石家庄', '邢台', '邯郸'],
        '北京': ['朝阳区', '海淀区', '昌平区'],
        '上海': ['青浦区', '静安区', '徐汇区']
    };
    // 循环自定义对象中的key 动态创建option标签，添加到第一个选择框中
    for (let province in data){
        // 创建一个个的option标签
        var optele = document.createelement('option');
        // 给创建的option标签设置文本和属性
        optele.innertext = province;
        optele.value = province;
        // 讲创建好的option标签添加到select框中
        s1ele.appendchild(optele)
    }
    s1ele.onchange = function () {
        //console.log(this.value)  // this指的就是当前操作对象本身，类似于python中的self
        // 获取与欧诺个户选择的省 根据省取到对应的市
        var currentpro = this.value;
        var citylist = data[currentpro];

        // 先将第二个select框中的所有内容清空
        s2ele.innerhtml = '';

        // 循环市的数组 创建option标签 操作属性 添加到第二个select框中
        for (let i=0;i<citylist.length;i++){
            // console.log(citylist[i])
            var optele = document.createelement('option');
            optele.innertext = citylist[i];
            optele.value = citylist[i];
            s2ele.appendchild(optele)
        }
    }
</script>
</body>
</html>

补充知识点

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网