JS之JavaScript中的面向对象及DOM操作

  1. 面向对象
  • 什么是面向对象 :
    面向对象就是一种编程思路

  • 何为对象?
    万事万物皆为对象而在JavaScript 中,所谓的对象,就是键值对的集合

  • 面向对象的三大特征 : 封装 继承 多态

  • JS中的内置对象

内置对象

eval()      计算表达式的值
isNaN()     是否是非数字的值

(1). Math对象

Math.round()    随机产生0-1之间的数值

Math.random()   四舍五入

(2). Date对象(通过date对象既可以设置时间也可以获取系统时间)

getHours()     返回Date对象的小时
getMinutes()   返回Date对象的分钟
getSeconds()   返回Date对象的秒
  • 创建对象
(1)var 对象名={
			key:value,
			key:value
			}
(2)基于Object创建对象
	var Person=new Object();
			Person.a=a;
(3)在JS中创建对象
var Person={
				a:'aaa',
				b:222,
				c:'ccc',
				getName:function(){
					return this.name;
				}
			}
(4)构造函数
function Person(name,age,job,sex){
				this._name=name;
				this._age=age;
				this._job=job;
				this._sex=sex;
			}
var _person01=new Person('姓名',23 ,'工作','性别'); //用来传递实参
		
			
		

  1. DOM
    DOM 是 W3C的标准
    W3C DOM 标准被分为 3 个不同的部分:
    (1)核心 DOM - 针对任何结构化文档的标准模型
    (2)XML DOM - 针对 XML 文档的标准模型
    (3)HTML DOM - 针对 HTML 文档的标准模型
  • JS中的DOM节点操作
    在HTML中所有事物都是节点
    如 :
    整个文档是一个文档节点
    每个 HTML 元素是元素节点
    HTML 元素内的文本是文本节点
    每个 HTML 属性是属性节点

  • DOM方法

  1. 常用DOM方法

getElementById() 
返回带有指定 ID 的元素

getElementsByTagName()
返回包含带有指定标签名称的所有元素的节点 列表

getElementsByClassName()
返回包含带有指定类名的所有元素的节点列表

getElementsByName() 
返回带有指定 name 的所有元素的节点列表。

appendChild()    	把新的子节点添加到指定节点

removeChild()   	删除子节点

replaceChild()   	替换子节点

insertBefore()  	在指定的子节点前面插入新的子节点

createElement()  	创建元素节点

createTextNode() 	创建文本节点

createAttribute()	创建属性节点

getAttribute()   	返回指定的属性值

setAttribute()  	把指定属性设置或修改为指定的值


2.常用DOM属性

innerHTML	 	 元素的文本值 

parentNode 		 元素的父节点

childNodes 		 元素的子节点

attributes 		 元素的属性节点

nodeName		 元素的名称 

nodeValue		 元素的值 

nodeType		 元素的类型

注:JS部分到此就全部结束了,下一节进行jQuary的介绍等之后的内容

猜你喜欢

转载自blog.csdn.net/qq_41547728/article/details/88982738