前戏

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。

JavaScript分为 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指浏览器窗口对象模型，顶级对象是window。

DOM （Document Object Model）是指文档对象模型，并非一个对象。

window、document都是一个实例对象，他们都属于Object，表示浏览器中打开的窗口。

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

window对象

window 对象表示一个浏览器窗口。

在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document

同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。

alert()  警告          显示带有一段消息和一个确认按钮的警告框。

 用法  window.alert('内容');

一般是直接写 alert('内容');

setInterval() 间隔     按照指定的周期（以毫秒计）来调用函数或计算表达式。

 用法:setInterval(code,millisec)

clearInterval()    取消由 setInterval() 设置的 timeout。

setTimeout()       在指定的毫秒数后调用函数或计算表达式。

clearTimeout()     取消由 setTimeout() 方法设置的 timeout。

scrollTo()         把内容滚动到指定的坐标。

confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
  用法open('https://www.baidu.com/')

close()            关闭浏览器窗口。

setTimeout()
setInterval()
这两个的用法一样，详见下文

  function f1(){ alert('哈哈哈');}

//    调用函数是直接写函数的名字  f1 不能带括号，也不能直接把 alert('哈哈哈') 函数中的方法放进去

        setTimeout(f1,6000);  这种方法可以调用函数

　　setTimeout("alert('5 seconds!')",5000)  //或者给要执行的函数加上引号也可以执行。

window的子对象

navigator对象

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称

navigator.appVersion　　// Web浏览器厂商和版本的详细字符串

navigator.userAgent　　// 客户端绝大部分信息

navigator.platform　　　// 浏览器运行所在的操作系统

screen对象

屏幕对象，不常用。

history对象

浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以用来前进或后退一个页面。

history.forward()  // 前进一页

history.back()  // 后退一页

history.go(n)  //  前进n页

location对象

location.href  获取URL

location.href="URL" // 跳转到指定页面

location.reload() 重新加载页面

DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
它是一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。简单来讲，DOM是一种API（应用编程接口）。
JavaScript对DOM进行了实现，对应于JavaScript中的document对象，通过该对象对DOM文档进行程序级别的控制。

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性如<div class='c1'> <div>
注释是注释节点(comment对象) 当给文章加上注释节点时，它的前后都会出现文本节点（）text (不管有没有内容，文本节点都会预留出来以便写入文本)

查找标签

（注意，这是查找中必经之路，线基本查找，得到找出后的 list[ ] 然后根据索引取出找到的标签（）然后再去进行间接查找）

document.getElementById             根据ID获取一个标签  注意之类Element这里没有 s 因为ID值是唯一的   而且用它取到的对象去间接查找的时候不用加[0], 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　直接写 document.getElementById.parent

document.getElementsByClassName     根据class属性获取 

document.getElementsByTagName       根据标签名获取标签合集  （括号里写的内容是标签名 如 div  或者 p）

document.getElementsByName          根据name属性获取标签集合

间接查找

parentNode  父节点   使用方法  document.getElementsByClassName('c1')[0].parentNode;

childNodes  所有子节点  

firstChild  第一个子节点  如果是块级标签的话 第一个字节点一般是 text

lastChild  最后一个子节点

nextSibling 下一个兄弟节点  一般是文本节点 text

previousSibling  上一个兄弟节点

// 注意节点和标签的区别，主要记下面的     主要是用下边的额

parentElement 父节点标签元素

children  所有子标签

firstElementChild  第一个子标签元素

lastElementChild  最后一个子标签元素

nextElementSibling  下一个兄弟标签元素 这个用的比较多

previousElementSibling  上一个兄弟标签元素

标签和节点的区别：

标签：<div> <p> <a>

节点：包含标签同时也包含注释 text

代码在这儿，看下结构

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>标签查找</title>

    <script>

    </script>

</head>

<body>

<div>

    <!--你好啊-->

    111

    <div class="c1">

        <p id="i1">哈哈</p>

    </div>

</div>

<div class="c2">

</div>

</body>

</html>

重要：

显示的是所有标签和节点

这个标签和节点都显示了

区别这个只是显示标签

文本节点(前三个最常用)

innerText 注意他后边不带括号	所有的纯文本内容，包括子标签中的文本常用 ele.innerText="字符串" 修改标签的文本信息
outerText	与innerText类似效果与innertext效果一样
innerHTML 注意他后边不带括号	所有子节点(包括元素、注释和文本节点) 他还有一个重要用法 ele.innerHTML=“<h1>好</h1>” 赋值HTML内容
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处的文本

innerText用法和和效果（所有的纯文本内容，包括子标签中的文本）

//可以看到c1中含有子标签而且标签中有文字

<div class="c1">

        c城市的辐射

        <!--我去了-->

        <p id="i1">哈哈</p>

        真是笨啊！！！

</div>

//c2中没有子标签，只有一个 里边有文字

<div class="c2">

你没的

</div>

outerHTML效果（所有子节点(包括元素、注释和文本节点) 包含自己本身的标签）

//可以通过这种方式给<tr></tr> 标签网里边添加内容
tr2.innerHTML='<td>2</td><td> 李岩</td><td> 洗脚</td>';

属性节点

attributes	获取所有标签属性
getAttribute()	获取指定标签属性
setAttribute()	设置指定标签属
removeAttribute()	移除指定标签属
var s = document.createAttribute("age") s.nodeValue = "18"	创建age属性设置属性值为18

例子

elementNode.setAttribute(name,value)

说明：

1.name：要设置的属性名

2.value:要设置的属性值

ths.setAttribute('placeholder','请输入用户名')  实际用法  这个就是将ths 中添加placeholder 属性 属性值是 请输入内容

样式操作

操作class类

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

classList.remove(cls)  删除指定类 删除不存在的会报错  可以通过在  style中定义好类 然后来增减类从而达到控制的效果  如下题圆

classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

画一个圆通过按按钮来改变颜色 ****：（按钮触发函数，函数中有给d1中添加c2属性功能）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>圆</title>

    <style>

        .c1{height:200px;

            width:200px;

            border-radius:100px;

            background-color:red}

        .c2{background-color:yellowgreen}

    </style>

    <script>

        function change(){

            //找到标签

            var ret=document.getElementById('d1');

            //变颜色，即给d1的classlist加减c2属性

        ret.classList.toggle('c2');

//        ret.classList.remove('c2');

        }

    </script>

</head>

<body>

<div id="d1" class="c1">

</div>

<!--onclick 事件，关联上函数change()-->

<input type="button" value="变颜色" onclick="change()" >

</body>

</html>

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function f() {

            //根据class 得到对对象

             var ret=document.getElementsByClassName('i1')[0];

            //找出对象中的内部文字

         a=ret.innerText;

         //取出下标为0的字母

         var b=a.charAt(0);

        //得到值，

        ret.innerText=ret.innerText.slice(1)+ b;

        }

        //按照指定时间循环打印内容

        var time=setInterval(f,500);

    </script>

</head>

<body>

<div class="i1">

    七彩跑马灯

</div>

</body>

</html>

跑马灯

指定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

通过script中的语句改变改变对象的属性

ele.style.backgroundColor="red"  //background-color这种在这儿变属性要改成驼峰体
ele.checked=true  这个是下一日的作业中有用到 checkbox中起到选中的作用

day 52 js学习 DOM 和BOM的更多相关文章

JS学习四（BOM DOM）
BOM Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 conso ...
JS中DOM以及BOM
一.bom对象 1screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.log(s ...
JS的DOM和BOM
* JavaScript分三个部分: ECMAScript标准:JS的基本的语法 DOM:Document Object Model --->文档对象模型----操作页面的元素 BOM:Brow ...
js之 DOM与BOM
JavaScript HTML DOM (文档对象模型)(Document Object Model) 什么是DOM? DOM是W3C标准. DOM定义了访问文档的标准: “W3C文档对象模型(DOM ...
js学习--DOM操作详解大全一（浏览器对象）
一.客户端中的window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. w ...
js关于DOM和BOM
关于BOM和DOM BOM 下面一幅图很好的说明了BOM和DOM的关系 BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及 ...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
js学习--DOM操作详解大全前奏（认识DOM）
一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...
JS学习--DOM
1.概念文档对象模型DOM,定义访问和处理HTML文档的标准方法.DOM将HTML呈现为带有元素.属性和文本的树结构(节点树). 2.document.getElementById("id ...

随机推荐

Linux下使用bind,epoll对网络编程封装
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
tomcat原理详解
tomcat的启动是通过Bootstrap类的main方法(tomcat6开始也可以直接通过Catlina的main启动) Bootstrap的启动 Bootstrap的main方法先new了一个自己 ...
：适配器模式：Adapter
#ifndef __ADAPTER_H__ #define __ADAPTER_H__ #include <iostream> using namespace std; class Duc ...
Tsi721信号及处理（转）
reference: https://blog.csdn.net/shanghaiqianlun/article/details/50545581 1． PCIe信号名称类型描述 PC ...
CentOS7安装Nginx及配置
Nginx是一款轻量级的网页服务器.反向代理服务器.相较于Apache.lighttpd具有占有内存少,稳定性高等优势.**它最常的用途是提供反向代理服务.** 安装在Centos下,yum源不 ...
玩转X-CTR100 l STM32F4 l MPU6050加速度陀螺仪传感器
我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] 本文介绍X-CTR100控制器板载加速度 ...
mybatis 异常 There is no getter for property named 'bizId' in 'class java.lang.Long'
mybatis 异常 There is no getter for property named 'bizId' in 'class java.lang.Long' 当使用mybatis进行传参的时候 ...
SharePoint Framework 配置你的SharePoint客户端web部件开发环境
博客地址:http://blog.csdn.net/FoxDave 你可以使用Visual Studio或者是你自己的开发环境来构建SharePoint客户端web部件.你可以使用Mac.PC或是 ...
nginx的日志切割
nginx日志默认情况下统统写入到一个文件中,文件会变的越来越大,非常不方便查看分析.以日期来作为日志的切割是比较好的,通常我们是以每日来做统计的.下面来说说nginx日志切割. 如果我们使用的是yu ...
python-函数参数不固定
默认参数的应用场景: 1.默认安装 2.数据库连接,默认端口号参数不固定的情况: 参数组: args:将接收的位置参数转换成元组 def test(*args): print(args) ...

day 52 js学习 DOM 和BOM

前戏