BOM对象

location对象
    location.href  获取URL
    location.href="URL" // 跳转到指定页面
    location.reload() 重新加载页面,就是刷新一下页面

定时器
    1. setTimeOut()  一段时间之后执行某个内容,执行一次
        示例
            var a = setTimeout(function f1(){confirm("are you ok?");},3000);
            var a = setTimeout("confirm('xxxx')",3000);  单位毫秒
        清除计时器
            clearTimeout(a);
    2.setInterval()  每隔一段时间执行一次,重复执行
        var b = setInterval('confirm("xxxx")',3000);单位毫秒
        清除计时器
            clearInterval(b);

DOM对象

查找标签

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集

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

        <div class="c1" id="d1">
            are you ok?

        </div>

        <div class="c1 c2">
            div2
        </div>
    </body>
    </html>

操作:
    var divEle = document.getElementById('d1');
    var divEle = document.getElementsByClassName('c1');
    var divEle = document.getElementsByTagName('div');

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素
示例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <div class="c1" id="d1">
            are you ok?

            <span id="s1">span1</span>
            <span id="s2">span2</span>
            <span id="s3">span3</span>
        </div>

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

操作:
    var divEle = document.getElementById('d1');
    找父级:divEle.parentElement;
    找儿子们:divEle.children;
    找第一个儿子:divEle.firstElementChild;
    找最后一个儿子:divEle.lastElementChild;
    找下一个兄弟:divEle.nextElementSibling;

标签操作

创建标签:重点
    var aEle = document.createElement('a');

添加标签
    追加一个子节点（作为最后的子节点）
    somenode.appendChild(newnode)；
    示例:
        var divEle = document.getElementById('d1')
        divEle.appendChild(aEle)

    把增加的节点放到某个节点的前边。
    somenode.insertBefore(newnode,某个节点);
    示例:
        var divEle = document.getElementById('d1'); 找到父级标签div
        var a = document.createElement('a');  创建a标签
        a.innerText = 'baidu';  添加文本内容
        var span2 = document.getElementById('s2'); 找到div的子标签span2
        divEle.insertBefore(a,span2); 将a添加到span2的前面

html文件代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    <div class="c1" id="d1">
        are you ok?

        <span id="s1">span1</span>
        <span id="s2">span2</span>
        <span id="s3">span3</span>
    </div>

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

    </body>
    </html>

删除节点

获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
示例: 删除span2标签
    var divEle = document.getElementById('d1');
    var span2 = document.getElementById('s2');
    divEle.removeChild(span2);

替换节点：

somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉

文本节点操作

var divEle = document.getElementById("d1")
divEle.innerText  #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML  #获取的是该标签内的所有内容，包括文本和标签
取值示例:
    div2.innerText;  不识别标签
        "are you ok? span1 span2 span3"
    div2.innerHTML;  识别标签
        "
            are you ok?

            <span id="s1">span1</span>
            <span id="s2">span2</span>
            <span id="s3">span3</span>
        "
设置值:
    var div1 = document.getElementById('d1');
    div1.innerText = 'xxx';
    div1.innerText = '<a href="">百度</a>';
    div1.innerHTML = '<a href="">百度</a>';

属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."

示例:
    <a href="http://www.baidu.com">百度</a>
    操作
        var a = document.getElementsByTagName('a');
        a[0].href;  获取值
        a[0].href = 'xxx'; 设置值

获取值操作

输入框 input
    获取值
        var inpEle = document.getElementById('username');
        inpEle.value;
    设置值
        inpEle.value = 'alexDsb';

select选择框
    获取值
        var selEle = document.getElementById('select1');
        selEle.value;
     设置值
        selEle.value = '1';

类操作

className  获取所有样式类名(字符串)

首先获取标签对象
标签对象.classList; 标签对象所有的class类值

标签对象.classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

示例:
    var divEle = document.getElementById('d1');
    divEle.classList.toggle('cc2');
    var a = setInterval("divEle.classList.toggle('cc2');",30);

    判断有没有这个类值的方法
        var divEle = document.getElementById('d1');
        divEle.classList.contains('cc1');

css设置

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

设置值:
    divEle.style.backgroundColor = 'yellow';
获取值
    divEle.style.backgroundColor;

事件

简单示例:
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            .cc1 {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .cc2{
                background-color: green;
            }

        </style>
    </head>
    <body>

    <div class="cc1 xx xx2" id="d1">

    </div>

    <script>
        var divEle = document.getElementById('d1');
        divEle.onclick = function () {
            divEle.style.backgroundColor = 'purple';
        }

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

绑定事件的方式

方式1:
    <script>
        var divEle = document.getElementById('d1');  1.找到标签
        divEle.onclick = function () {       2.给标签绑定事件
            divEle.style.backgroundColor = 'purple';
        }
    </script>

        下面的this表示当前点击的标签
        var divEle = document.getElementById('d1');
        divEle.onclick = function () {
            this.style.backgroundColor = 'purple';
        }

方式2:
    标签属性写事件名称=某个函数();
    <div class="cc1 xx xx2" id="d1" onclick="f1();"></div>

    <script>
        js里面定义这个函数
        function f1() {
            var divEle = document.getElementById('d1');
            divEle.style.backgroundColor = 'purple';
        }
    </script>

    获取当前操作标签示例,this标签当前点击的标签
        <div class="cc1 xx xx2" id="d1" onclick="f1(this);"></div>
        function f1(ths) {
            ths.style.backgroundColor = 'purple';
        }

百万年薪python之路 -- JS的BOM与DOM对象的更多相关文章

百万年薪python之路 -- JS基础介绍及数据类型
JS代码的引入方式1: <script> alert('兽人永不为奴!') </script> 方式2:外部文件引入 src属性值为js文件路径 <script src ...
百万年薪python之路 -- 面向对象之继承
面向对象之继承 1.什么是面向对象的继承继承(英语:inheritance)是面向对象软件技术当中的一个概念. 通俗易懂的理解是:子承父业,合法继承家产专业的理解是:子类可以完全使用父类的方法和属 ...
百万年薪python之路 -- 数据库初始
一. 数据库初始 1. 为什么要有数据库? 先来一个场景: 假设现在你已经是某大型互联网公司的高级程序员,让你写一个火车票购票系统,来hold住十一期间全国的购票需求,你怎么写? 由于在同一时 ...
百万年薪python之路 -- 并发编程之协程
协程一. 协程的引入本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两 ...
百万年薪python之路 -- 请求跨域和CORS协议详解
楔子什么是同源策略同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab ...
百万年薪python之路 -- 前端CSS样式
CSS样式控制高度和宽度 width宽度 height高度块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...
百万年薪python之路 -- HTML基础
一. Web标准 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示:c ...
百万年薪python之路 -- MySQL数据库之 Navicat工具和pymysql模块
一. IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具,我们使用Navicat工具,这个工具本质上就是一个socket客户端,可视化的连接 ...
百万年薪python之路 -- Socket
Socket 1. 为什么学习socket 你自己现在完全可以写一些小程序了,但是前面的学习和练习,我们写的代码都是在自己的电脑上运行的,虽然我们学过了模块引入,文件引入import等等,我可以在程序 ...

随机推荐

初学者-asp.net三层架构
一.概述: 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI).业务逻辑层(BLL).数据访问层(DAL).区分层次的目的即为了“高内聚,低耦合”的思想.是一种总体设计的思想. 1.表现层( ...
hadoop集群zookeeper迁移
1. zookeeper作用 ZooKeepr在Hadoop中的应用主要有: 1.1 HDFS中NameNode的HA和YARN中ResourceManager的HA. 1.2 存储RMStateSt ...
【呕心总结】python如何与mysql实现交互及常用sql语句
9 月初,我对 python 爬虫燃起兴趣,但爬取到的数据多通道实时同步读写用文件并不方便,于是开始用起mysql.这篇笔记,我将整理近一个月的实战中最常用到的 mysql 语句,同时也将涉及到如何 ...
scrapy爬取迅雷电影天堂最新电影ed2k
前言几天没用scrapy爬网站了,正好最近在刷电影,就想着把自己常用的一个电影分享网站给爬取下来保存到本地mongodb中项目开始第一步仍然是创建scrapy项目与spider文件切换到工作目 ...
json入门初体验
json是JavaScript对象表示法,也是轻量级的文本数据交互格式,独立于语言,能够自我描述 json文本格式在语法上与创建JavaScript对象代码相同,多以json不需要解析器,js程序能够 ...
MySQL命令窗口出现中文乱码的解决方法
查询表语句的时候,出现了中文乱码,但是用Navicat for MySQL查看的时候却是正常的,字符集都是设置的utf-8,如下图所示: 其实上大学学习java的时候也遇到了中文乱码但是却没有 ...
js 指定分隔符连接数组元素join()
示例:<script type="text/javascript"> var myarr = new Array(3); myarr[0] = "I" ...
Base64编码有时会默认换行 [转]
Base64编码有时会默认换行 2013-01-27 20:59 6647人阅读评论(0) 收藏举报分类: Base64 换行版权声明:本文为博主原创文章,未经博主允许不得转载. ...
.Net Core 商城微服务项目系列（五）：使用Polly处理服务错误
项目进行微服务化之后,随之而来的问题就是服务调用过程中发生错误.超时等问题的时候我们该怎么处理,比如因为网络的瞬时问题导致服务超时,这在我本人所在公司的项目里是很常见的问题,当发生请求超时问题的时候, ...
Scala XML
XML 直接在代码中使用 XML 字面量 val doc: Elem = <html><head><title>Test</title></hea ...

百万年薪python之路 -- JS的BOM与DOM对象

BOM对象

DOM对象

查找标签

直接查找

间接查找

标签操作

文本节点操作

属性操作

获取值操作

类操作

css设置

事件

绑定事件的方式

百万年薪python之路 -- JS的BOM与DOM对象的更多相关文章

随机推荐

热门专题