js--JavaScript与DOM之间的关系

╰半夏微凉° 2021-09-27 04:22 372阅读 0赞

*  前言
 *  内容
    
     *  类型简介
        
         *  js中数字是浮点类型，而且是不精确的类型
         *  字符串
         *  json案例
         *  数组
     *  构造方法域对象
        
         *  构造方法是原型继承的载体
     *  构造方法
     *  实现步骤
     *  添加成员
     *  js支持动态成员
     *  类型的转换与包装对象
        
         *  基本类型的转换
         *  数字转字符串
         *  字符串转数字
         *  转化成boolean
         *  包装类型
     *  常用对象
     *  正则表达式
        
         *  元字符
            
             *  基本元字符：
             *  限定元字符：
             *  首位元字符：
             *  简写元字符：
             *  在JavaScript中如何创建一个正则表达式
             *  匹配：
             *  提取：
             *  替换：
     *  js代码的编写方式
     *  DOM文档对象模型
        
         *  DOM树
         *  事件
            
             *  事件怎么写，事件是个什么东西
             *  事件怎么写（要做什么就写什么）
     *  对节点的增删改查
        
         *  节点类型
            
             *  为节点添加事件的方法
             *  如何获得节点
                
                 *  节点对象 document.getElementById(“id的字符串”)
                 *  节点集合 document.getElementsByTagName(“标签名”)；
                 *  节点集合：父结点.getElementsByTagName(“标签名”)；
                 *  属性（如果是元素节点，那么他可以有子节点）
         *  修改节点
 *  总结
 *  end

# 前言 #

这篇博客总结了JavaScript与DOM之间的关系，所以内容可能不少，辛苦了！

# 内容 #

## 类型简介 ##

### js中数字是浮点类型，而且是不精确的类型 ###

0.30000000004
    0.39999999998  -> 0.4
    MongoDB（NoSQL）使用的是JavaScript shell
        一个是模糊数字
        一个是数字表示上限
        一个是数字表示下限

### 字符串 ###

var str = “字符串”；
    //在js中双引号和单引号都表示字符串
    var str = ‘字符串’；
    <input type ="button" onclick = "alert("Hello World") " />
    <input type ="button" onclick = "alert('Hello World') " />

### json案例 ###

var str = " { k1:123 , k2:456 } " ;
    var str = " {k1:'张三' ,k2:'李四' }"；
    new Function("return" + str)();

### 数组 ###

var arr1 = []；//字面值，直接量
        var arr2 = new Array();

## 构造方法域对象 ##

### 构造方法是原型继承的载体 ###

var o1 = {} ;
    var o2 = new Object();//Object的构造方法
    //js中所有的对象类型“来自于”object
    //判断变量是否是构造方法创建出来
    boolean 变量 instanceof Object);
    alert(() instanceof Object);

## 构造方法 ##

就是普通方法，在调用的时候使用new就可以将其作为构造方法来使用了，js没有类，直接使用构造方法创建对象

## 实现步骤 ##

1.创建一个函数
    2.new这个函数

## 添加成员 ##

在构造方法中是用this.成员进行添加

## js支持动态成员 ##

如果一个对象没有定义Memeber的属性，但是现在希望他有，只需要用“对象.Menber=值”，那么就可以给这个对象创建改成员了

## 类型的转换与包装对象 ##

### 基本类型的转换 ###

number、boolean、string  
![这里写图片描述][70]

### 数字转字符串 ###

调用String（数字）
    数字+“”
    数字.toString

### 字符串转数字 ###

字符串 -/*// 0
    Number（字符串）
    parseInt()  parseFloat()

### 转化成boolean ###

if ( !!val ) \{ //双重否定直接转boolean  
\}  
常常会有能力判断

### 包装类型 ###

基本类型：number、string、boolean  
包装类型：Number、String、Boolean  
基本类型不是对象，那么就不具备方法，知识一个简单的数据  
在执行诸如“num.toString（）”的时候  
编译器会自动的根据num生成一个Number类型的对象，并调用toString方法将结果返回，然后释放Number对象，等待垃圾回收

## 常用对象 ##

字符串、数组、时间、正则表达式、异常

## 正则表达式 ##

### 元字符 ###

#### 基本元字符： ####

`. 、[] 、| 、 （）`

#### 限定元字符： ####

`+ 、* 、 ？、｛n｝、｛n,｝、｛n,m｝`

#### 首位元字符： ####

`^ 、$`

#### 简写元字符： ####

`\d 、\D、\w、\W、\s、\S`

#### 在JavaScript中如何创建一个正则表达式 ####

字面值：`var regex = /\d+/`;  
构造函数：`var regex = new RegExp("\\d+")`;  
**eg.循环匹配：**

var str = "12345";
    var r = /\d\d/g;//后缀g表示global全局的
    //var m = r.exec(str);
    //m = r.exec(str);
    //m = r.exec(str);
    //m = r.exec(str); 
    var arr = [];
    //arr.push(...);
    var m = null;
    while ((m=r.exec(str)) !=null) {
        arr.push(m)
    }
    var _ = 0;

#### 匹配： ####

//bool Regex.IsMatch(字符串,正则)；  
//boolen 正则表达式对象

#### 提取： ####

//提取使用方法  
//像数组的对象 正则表达式对象.EXEC（字符串）；  
//这个对象的\[0\]是匹配到的结果  
//这个\[1\]、\[2\]、…是各个组  
//在正则后面加上一个给g，表示为全局模式  
//循环提取使用的方法与刚才是一样的，不同的是需要是需要循环调用exec方法  
**eg.提取邮箱：**

var str = "我的邮箱是18330699694@163.com，你的呢？";
    var r = /([a-zA-Z0-9]+)@([a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+)/; var match = r.exec(str); alert(match[0]); alert(match[1]); alert(match[2]);

#### 替换： ####

`<string>.replace(正则表达式或字符串)`  
**eg.替换**  
字符串

var str = "a----b-----c------d-----e--------------------------f";
    var str1 = str.replace(/-+/g, "-");
    alert(str1);

年月日

var date = "2018年7月5日";
    var date1 = date.replace(/(\d+)年(\d+)月(\d+)日/, "$1-$2-$3"); 
    alert(date1);

## js代码的编写方式 ##

无论是js还是css都可以写在html页面中  
`<script>`与`<style>`标签可以放在页面中的任何一个地方，并且多个与一个是一样的。即只要写出，就一定起作用。  
一般企业开发为了让浏览器显示页面更加流畅  
`<style>`或`<link>`标签都写在前面  
`<script>`标签一般都将较大的内容放在后面(因为较大的内容在加载或者下载的时候回占用网页打开的资源，如果在一开始就加载或下载较大的资源就势必会造成其他资源的暂缓使用，页面就会出现卡屏或者断断续续的现象)  
css使用link引入  
可以复用css文件  
JavaScript使用Script标签引入  
`<script type = "text/javascript" src="路径"></script>`

## DOM文档对象模型 ##

### DOM树 ###

eg.DOM树

<html>
        <head>
            <title>理解DOM</title>
        </head>
        <body>
            <p>
            今天天气<span style="color:red;font-size:30px;">很好</span>,昨天很冷。。。</p>
        </body>
    </html>

![这里写图片描述][70 1]

### 事件 ###

#### 事件怎么写，事件是个什么东西 ####

C\#事件就是一个委托变量（事件的编程概念）  
JavaScript就是方法  
描述性概念

> 浏览器的底层也会有很多触发函数的机制

浏览器加载完毕后

if(onload != null){
        onload();
    }

如果鼠标点击一个div

if(div.onclick!= null){
        div.onclick();

}

#### 事件怎么写（要做什么就写什么） ####

页面加载完毕以后，打印一句话，如果有一个a标签，并给其添加一个点击事件，你的事件没有返回值，或返回false那么a标签就会直接跳转，否者就会停止执行默认操作，在发现点击a标签的时候，浏览器内部会执行

if(a.onclick != null){
            var res = a.onclick();
            if(res === true){
                    break;//默认的正常跳转就不做了
            }
    }

如果事件处理函数，返回了false

## 对节点的增删改查 ##

### 节点类型 ###

1、元素节点  
2、属性节点  
3、文件节点

#### 为节点添加事件的方法 ####

<node>.onclick = function() { }

#### 如何获得节点 ####

##### 节点对象 document.getElementById(“id的字符串”) #####

获得页面中指定id的节点对象

##### 节点集合 document.getElementsByTagName(“标签名”)； #####

获得页面中所有标签名符合要求的标签

##### 节点集合：父结点.getElementsByTagName(“标签名”)； #####

获得指定父节点下的所有名字符合要求的节点

##### 属性（如果是元素节点，那么他可以有子节点） #####

<node>.childNodes    获得节点下的所有子节点
    <node>.firstChild    <node>.childNodes[0]
    <node>.lastChild     <node>.childNodes[<node>.childNodes.length - 1]

### 修改节点 ###

所谓的修改节点就是修改节点的属性与包含的文本  
获得节点  
修改属性的标准方法（DOM-Core）

<ndoe>.setAttribute("属性名"，“值”)；
    文本<node>.getAttribute("属性名")；
    DOM-html
    <node>.属性名 = 值；
    var v= node

# 总结 #

以上内容是我对DOM的一点点理解，如有不足的地方希望您给予指点，我将在看到的第一时间改正

# end #

谢谢您的阅读！

[70]: /images/20210923/23b95743e3354ba388dac6461a84e222.png
[70 1]: /images/20210923/a726950b845d4d8894e460aa0e0a5055.png