javascript02

javascript02

DOM

基本介绍

在HTML中是一种类似于树形的结构，结构最上方就是范围最大的标签，标签下就是此标签的子标签，以此类推。可以说html中就是由元素（标签），元素中的属性，元素内的文本内容组成的，js就是通过这些元素的id值name值等来获取这个元素对象，用代码的方式实现动态网页。

Element（元素，标签）

获取Element对象

使用js提供的内置对象document中的getElementByXXX方法来获取Element对象常见的三种方法有：

• getElementById（“ “）参数传递标签中的id属性的名字，返回一个此标签的Element对象，id属性在标签中是唯一的，只能返回一个对象。
• getElementsByclassName（” “）参数传递标签中的classname属性的值，返回一个Element数组，classname属性的值不是唯一，可以返回多个Element对象。
• getElementsByname（” “）跟第二个方法是一样的
• getElementsByTagName（” “）这个方法是最特殊的，参数传递一个标签的名字，返回一个数组Elements，因为在html中可以定义多个同样的标签，根据索引可以取出对应的Element对象

let el = document.getElementById(" ")     //参数传递ID的值

let e2 = document.getElementsByclassName(" ")   //参数传递classname的值返回一个Elements数组

let e3 = document.getElementsByName(" ");//参数传递name的值，返回数组

let e4 = document.getElementsByTagName(" ");//传递标签名字，返回Elements数组

parentElement：用法就是子标签的对象.parentElement，返回值是此子标签的父标签对象

元素的增删改

• createElement（" "）创建标签的方法，用js提供的document调此方法，参数是想要创建的标签名，返回一个此标签的Element对象。

let a = document.createElement("a") //创建了一个a标签的Element对象。

• appendChild（）添加一个子标签到父标签中，比如想在tr标签中添加一个td标签，tr标签的Element对象.appendChild（td标签的Element对象），就可以在tr标签中添加一个td标签。

let tr = document.getElementById("tr"); //获取tr标签对象
let td = document.createElement("td");//创建td标签
tr.appendChild(td);//将td标签添加到tr标签中

• removeChild（）删除一个子标签从父标签中，比如想在tr标签中删除一个已经存在的td标签，tr标签的Element对象.removeChild（td标签的Element对象），就可以在tr标签中删除一个td标签。

   let tr = document.getElementById("tr");//获取tr对象
   let td = document.getElementById("td");//湖片区td对象
   tr.removeChild(td);//通过父标签中的removeChild方法删除子标签td
  

• replaceChild（）替换元素的方法，也是父标签的方法，括号内有两个参数，第一个参数是替换的元素，第二个参数是被替换的元素。

let tr = document.getElementById("tr");//获取父标签
let oldtd = document.getElementById("oldTd");//获取要替换掉的元素
let newtd = document.createElement("td");//创建新的td
tr.replaceChild(newtd,oldtd);//方法替换

Attribute（元素的属性）

• setAttribute：元素对象中的对属性添加赋值的方法，两个参数，第一个参数是属性，第二个参数是赋值的属性值。注：如果有相同的属性，就更换此属性的值，如没有，增加一个属性和对应的属性值。

let td = document.getElementById("td");//获取td元素
    td.setAttribute("name","tdname");//给td元素添加一个name属性，值为tdname

• getAttribute：获取对应元素的对应属性的值，参数就是属性名，返回值是此属性对应的值。

let td = document.getElementById("td");//获取td对象
    let tdname = td.getAttribute("name");//跟上方代码一致，就可以获得tdname值

• removeAttribute：根据指定属性名移除属性。

let td = document.getElementById("td");//获取td
    td.removeAttribute("name");//移除name属性

• style属性：动态的为元素添加样式

let td = document.getElementById("td");//获取td
    td.style.color = "red";//为td元素设置颜色样式

文本

• innerText：元素.innerText = 内容，为这个元素赋上后面的内容信息，不解析标签，比如写个标签在内容中，文本内容不发生改变，原样输出标签
• innerHTML：格式和上面一样，只是会解析标签，比如内容中有个a标签，解析时，元素的文本就会多出一个a标签

事件的使用

1. 在标签中添加onclick属性指定需要在单击时调用的方法

   <button id="up" onclick="up()">上一张</button> 
   <button id="down" onclick="down()">下一张</button>
   

2. onclick属性实际上就是一个函数变量

   1. 普通函数的名字
   2. 匿名函数的变量名
   3. 直接给一个匿名函数

案列添加步骤

1. 添加按钮绑定点击事件
2. 获取用户输入的数据
3. 创建对应的td并添加上数据
4. 将td添加到tr中
5. 将tr添加到table

删除

1. 点击事件触发是a标签
2. 需要删除的是tr
3. tr的父元素时table
4. 点击a的事件中怎么找到当前行
   1. 通过给时间函数传入this代表当前元素

前端调试

1. F12
2. 找到source选项卡
3. 如果观察一个变量的值
   1. 鼠标放上去
   2. 双击选中变量然后右键选择add selected text to watchs

js面向对象

1. 类定义

   class 类名 {
       // 不需要提前定义属性字段
       constructor(属性1， 属性2) {
           this.field1 = 属性1;
           this.field2 = 属性2;
       }
       
       方法名(参数...) {
           方法体；
           return;
       }
   }
   

2. 使用

   let myobj = new 类名();
   myobj.方法名()
   

字面量定义类

1. 实际上是直接创建对象使用

   let obj = {
       filed1: v1,
       filed1: v2
       .....
   }
   

   1. v也就代表类型
      1. String
      2. 数字
      3. 函数

继承

1. extends

js的RegExp

1. test(string)来验证一个字符串是否符合规则

2. 创建

   let reg1 = /^[1][358][0-9]{9}$/
   

Set

1. 不能有重复元素
2. 元素时有序