JavaScript学习笔记（二），js内置对象，Dom操作和Bom操作

缺乏、安全感 2021-12-16 05:55 221阅读 0赞

## 6、 js内置的对象 ##

**6.1 数组**

<script type="text/javascript">
    		//声明出数组，并附上初始值
    		//var arr=[1,2,3];
    		var arr=new Array();
    		//js的长度可以变化，把4放入到数组里面。
    		arr.push(4);
    		arr[1]=1;
    		/*for(var i=0;i<arr.length;i++){
    			console.log(arr[i]);
    		}*/
    		//这种for循环，循环到的i值是数组的下标，而不是元素值
    		for(var i in arr){
    			console.log(arr[i]);
    		}
    	</script>

或者我们先创建出数组对象，再往数组里面放元素：  
var arr=new Array();  
arr.push(2);  
arr\[1\]=1;

## 6.2 字符串 ##

常见的方法：  
indexOf():获取字符串的下标  
subString():截断字符串。  
Trim():去除左右空格  
Split():把字符串拆分成数组。  
![在这里插入图片描述][20190705114133474.png]  
**6.3 日期**

<script type="text/javascript">
    		var d=new Date();//系统当前时间
    		alert(d);
    		var y=d.getFullYear();//获取四位的年
    		var m=d.getMonth();//获取月份,月份从0开始，要得到当前月份需要+1
    		var day=d.getDay();//获取到星期几
    		alert(day);
    	</script>

## 6.4 Json ##

Json就是Js中的对象。Ajax会用到json。  
var person=\{属性名:属性值,属性名：属性值,函数名:function()\{函数体\}\};

<script type="text/javascript">
    		//定义json对象
    		var stu={ 
    				name:"zhangsan",
    				age:20,//属性
    				study:function(){ 
    					console.log("------good good study----------");
    				},//对象的方法
    				say:function(){ 
    					console.log("----------你好，我叫"+this.name+"-------");
    				}
    		};
    		stu.say();//调用say方法
    		var a=stu.age;//调用age属性
    		console.log(a);
    	</script>

## 7 Dom操作 ##

通过js代码，  
操作元素（html的标签）的属性，增加或者修改属性值，或者修改元素的内容。  
**Dom：document object model（文档对象模型）。**  
浏览器在解析html文档的时候，会把html源码分析成一个模型图，这个图形就被称为文档结构模型。  
![Dom操作][Dom]  
//获取到dom模型上面的dom元素。  
var obj=document.getElementById(“元素的id值”);

Dom操作案例：  
**通过按钮实现复选框的选中和不选中**

<script type="text/javascript"> function test(){ var name = document.getElementsByName("f"); for(var i=0;i<name.length;i++){ name[i].checked=document.getElementById("ch").checked; } } </script>
      </head>
    
      <body>
       	<div style="margin:0 auto;width: 400px;height: 200px;" id="test" >
    		<input type="checkbox" id="ch" onclick="test()"/>全选<br/>
    		<input type="checkbox" name="f">西瓜<br/>
    		<input type="checkbox" name="f">苹果<br/>
    		<input type="checkbox" name="f">香蕉<br/>
    		<input type="checkbox" name="f">橘子<br/>
       	</div>
      </body>

**鼠标移入移出文字背景色变化效果特效**

<script type="text/javascript"> function test(obj){ obj.style="color:red"; } function test2(obj) { obj.style="color:black"; } </script>
      </head>
      
      <body>
       	<div style="margin:0 auto;width: 400px;height: 200px;" id="test" >
    		<br/>
    		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t1">张山</h1>
    		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t2">李四</h1>
    		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t3">王五</h1>
    		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t4">赵柳</h1>
    		<h1 onmouseover="test(this)" onmouseout="test2(this)" id="t5">马起</h1>
    		
       	</div>
       	
      </body>

## 12 Bom操作 ##

学习js其实就是在学习三个方面的内容。

1.  js的基本语法。函数
2.  Dom操作。控制元素，对元素进行修改。
3.  Bom操作。对整个浏览器对象的操作。包括刷新，后退，地址栏的操作，窗口的弹出。

Bom:浏览器browser对象模型。  
Bom操作的根对象是当前窗口的对象。Window。  
Window.alert(“hello world”);  
Window.οnlοad=function()\{\}  
Window表示当前窗口对象。代码运行在哪个窗口中，window就表示谁。所以window对象调用方法时是可以省略的。Window.alert()=alert();

[20190705114133474.png]: /images/20211214/0e90095314f84d0397e7b67cf263f013.png
[Dom]: /images/20211214/ba06e6f1f3b34537a1dbf460b7f5bb4c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript的BOM和DOM对象操作与设置顶级窗口------JavaScript

> <!DOCTYPE html> >  > <html lang="en" id="myHtml"> >

小咪咪/ 2024年02月19日 11:31/ 0 赞/ 5 阅读

相关【JavaScript教科书】JavaScript之BOM和DOM操作详细总结

文章目录 @\[toc\] 一、JavaScript的BOM 1.1 了解BOM 1.2 window 1.3 window尺寸 1.4 window方法（打开与

清疚/ 2023年03月13日 15:30/ 0 赞/ 245 阅读

相关 JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】

> w3school 在线教程：[https://www.w3school.com.cn][https_www.w3school.com.cn] > > 1. [Ja

左手的ㄟ右手/ 2022年10月29日 05:20/ 0 赞/ 201 阅读

相关 JS 之（二）DOM属性操作，DOM事件操作，BOM操作

DOM 介绍 dom: document object model 文档对象模型 DOM技术： php里边有：php语言与 xml/htm

心已赠人/ 2022年09月25日 14:24/ 0 赞/ 193 阅读

相关 HTML-JavaScript操作BOM对象

BOM模型 BOM：浏览器对象模型（Browser Object Model） BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构 ![70][] BO

我不是女神ヾ/ 2022年05月12日 07:42/ 0 赞/ 219 阅读

相关学习笔记——JavaScript操作DOM

DOM的核心对象 /\Document对象及其方法\/ 只有Document对象的方法可以在页面上查找、创建、删除元素查找一个或多个元素

缺乏、安全感/ 2022年03月19日 09:50/ 0 赞/ 287 阅读

相关 JavaScript学习笔记（二），js内置对象，Dom操作和Bom操作

6、 js内置的对象 6.1 数组 <script type="text/javascript"> //声明出数组，并附上初始值 //v

缺乏、安全感/ 2021年12月16日 05:55/ 0 赞/ 222 阅读

相关 JavaScript操作BOM

BOM概念 BOM是浏览器对象模型的简称（Browser Object Model），BOM尚无正式标准，由于现代浏览器几乎实现了JavaScript交互性方面的相同方法和

悠悠/ 2021年09月14日 02:26/ 0 赞/ 377 阅读

相关 js函数,DOM和BOM操作

一：函数 1.1 Function() 构造器正如您在之前的例子中看到的，JavaScript 函数是通过 function 关键词定义的。函数也可以通过名为

水深无声/ 2021年09月04日 04:10/ 0 赞/ 385 阅读

相关 JavaScript的BOM和DOM学习

DOM简单学习：为了满足案例要求功能：控制html文档的内容获取页面标签(元素)对象：Element document.getElementById(“id值”):...

灰太狼/ 2021年01月24日 03:08/ 0 赞/ 753 阅读