JavaScript DOM介绍&& JS面向对象

JavaScript

DOM介绍

每一个标签都可以视为一个对象

Element：元素对象

html标签对象的获取

getElementById(id属性值) 根据id属性值获取元素对象

getElementsByTagName(nasme属性值) 根据元素名称获取元素对象们，返回数组

getElementsByClassName(name属性值) 根据Class属性值获取元素对象们，返回数组

getElementsByNamse(name属性值) 根据name属性值获取元素对象们，返回数组

html元素的创建

var option = document.createElement("option");
option.innerText="广西";

元素添加到dom树

var select=document.getElementById("s");
        select.appendChild(option);

remove 方法

1.Chrome浏览器中能够删除自己

2.IE浏览器不能删除自己

元素属性操作

1.获取元素对象

2.添加属性

//添加属性
        let a = document.getElementsByTagName("a")[0];
        a.setAttribute("href","https://www.baidu.com")

3.获取属性

//获取属性
        let value =a.getAttribute("href");
        alert(value);

4.删除属性

//删除属性
        a.removeAttribute("href");

5.style他是Element的属性，但是他自己也是一个对象

//style属性
        a.style.color="yellow";

6…className属性 添加指定样式

a.ClassName=

文本

1.innerText,添加普通文本，不支持标签解析

2.innerHTML，支持标签解析

JavaScript 事件

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。

用户在操作网页的过程中，会有各种操作，每种操作都会产生事件。我们可以通过JS来监听这些事件，对这些事件编写函数进行处理，来实现与用户的交互。

1. 事件处理中命名函数的写法

   onclick = "函数名()"
   
   function 函数名() {
   
   }
   

2. 事件处理中匿名函数的写法

   元素对象.onclick = function() {
     
   }
   

• JS中常用的事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	得到焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出

案例添加步骤

1.添加按钮点击事件

2.获取用户输入的数据

3.创建对应的td并添加上数据

4.将td添加到tr中

5.将tr添加到table中

JavaScript

DOM介绍

每一个标签都可以视为一个对象

Element：元素对象

html标签对象的获取

getElementById(id属性值) 根据id属性值获取元素对象

getElementsByTagName(nasme属性值) 根据元素名称获取元素对象们，返回数组

getElementsByClassName(name属性值) 根据Class属性值获取元素对象们，返回数组

getElementsByNamse(name属性值) 根据name属性值获取元素对象们，返回数组

html元素的创建

var option = document.createElement("option");
option.innerText="广西";

元素添加到dom树

var select=document.getElementById("s");
        select.appendChild(option);

remove 方法

1.Chrome浏览器中能够删除自己

2.IE浏览器不能删除自己

元素属性操作

1.获取元素对象

2.添加属性

//添加属性
        let a = document.getElementsByTagName("a")[0];
        a.setAttribute("href","https://www.baidu.com")

3.获取属性

//获取属性
        let value =a.getAttribute("href");
        alert(value);

4.删除属性

//删除属性
        a.removeAttribute("href");

5.style他是Element的属性，但是他自己也是一个对象

//style属性
        a.style.color="yellow";

6…className属性 添加指定样式

文本

1.innerText,添加普通文本，不支持标签解析

2.innerHTML，支持标签解析

JavaScript 事件

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。

用户在操作网页的过程中，会有各种操作，每种操作都会产生事件。我们可以通过JS来监听这些事件，对这些事件编写函数进行处理，来实现与用户的交互。

1. 事件处理中命名函数的写法

   onclick = "函数名()"
   
   function 函数名() {
   
   }
   

2. 事件处理中匿名函数的写法

   元素对象.onclick = function() {
     
   }
   

• JS中常用的事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	得到焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出

案例添加步骤

1.添加按钮点击事件

2.获取用户输入的数据

3.创建对应的td并添加上数据

4.将td添加到tr中

5.将tr添加到table中

<script>
    document.getElementById("add").onclick=function(){
        //1.创建行信息
        let tr =document.createElement("tr");
        //2.创建4个单元格信息
        let nametd=document.createElement("td");
        let agetd=document.createElement("td");
        let gendertd=document.createElement("td");
        let deletetd=document.createElement("td");
        //3.添加单元格信息到行信息里
        tr.appendChild(nametd);
        tr.appendChild(agetd);
        tr.appendChild(gendertd);
        tr.appendChild(deletetd);
        //4.获取信息
        let nametext=document.getElementById("name").value;
        let agetext=document.getElementById("age").value;
        let gendertext=document.getElementById("gender").value;
        //5.添加信息到单元格
        nametd.innerText=nametext;
        agetd.innerText=agetext;
        gendertd.innerText=gendertext;
        //6.创建超链接元素和显示的文本以及添加href属性
        let a=document.createElement("a");
        let del="删除";
        a.setAttribute("href","JavaScript:void(0);");
        a.setAttribute("onclick","drop(this)");
        a.innerText=del;
        deletetd.appendChild(a);
        //添加到table
        let table=document.getElementById("tb");
        table.appendChild(tr);
    }

JavaScript面向对象

在java中我们学习过面向对象，核心思想是万物皆对象。在JavaScript中同样也有面向对象。思想类似

类的定义

class Person{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            show(){
                document.write(this.name+","+this.age+"<br>");
            }
            eat(){
                document.write("吃海底捞");
            }
        }

2.类的字面量定义

let person={
            name:"蚊子",
            age:18,
            hobby:["学习","看帅哥"],

            eat:function(){
                document.write("和鹏哥吃海底捞")
            }
        }

内置对象

1.Number

• parseFloat() 将传入的字符串浮点数转为浮点数
• parseInt() 将传入的字符串整数转为整数
• is Nan() 判断传入的值是否是NaN

2.mate

• ceil(x) 向上取整
• floor(x) 向下取整
• round(x) 把数四舍五入为最接近的整数
• random() 随机数，返回一个0-1的随机数(含头不含尾)
• pow(x,y) 幂运算 x的y次方

3.Date

构造方法：

• Date() 根据当前时间创建对象
• Date(value) 根据指定毫秒值创建对象
• Date(year,month,[day，hours,minutes,seconds,milliseconds]) 根据指定字段创建对象（月份是0-11）

4.String

• length属性 获取字符串的长度
• charAt(index) 获取指定索引出的字符
• indexOf(value) 获取指定字符串出现的索引位置
• substring(start,end) 根据指定索引范围截取字符串（含头不含尾）
• split(value) 根据指定规则切割字符串，返回数组
• replace(old,new) 根据新字符串替换老字符串

5.RegExp

正则表达式：是一种对字符串进行匹配的规则

6.Array

• push(元素) 添加元素到数组的末尾
• pop() 删除数组末尾的元素
• shift() 删除数组最前面的元素
• includes(元素) 判断数组中是否包含指定的元素
• reverse() 反转数组元素
• sort() 对数组元素排序

7.Set

JavaScript中的Set集合，元素唯一。存取顺序一致。

8.Map

JacaScript中的Map集合，Key唯一，存取顺序一致。

构造方法

Map() 创建Map集合对象

成员方法

set(key,value) 添加元素

size属性 获取集合的长度

get(key) 根据key获取value

entries() 获取迭代器对象

delete(key) 根据key删除键值