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标签
事件的使用
-
在标签中添加onclick属性指定需要在单击时调用的方法
<button id="up" onclick="up()">上一张</button> <button id="down" onclick="down()">下一张</button>
-
onclick属性实际上就是一个函数变量
- 普通函数的名字
- 匿名函数的变量名
- 直接给一个匿名函数
案列添加步骤
- 添加按钮绑定点击事件
- 获取用户输入的数据
- 创建对应的td并添加上数据
- 将td添加到tr中
- 将tr添加到table
删除
- 点击事件触发是a标签
- 需要删除的是tr
- tr的父元素时table
- 点击a的事件中怎么找到当前行
- 通过给时间函数传入this代表当前元素
前端调试
- F12
- 找到source选项卡
- 如果观察一个变量的值
- 鼠标放上去
- 双击选中变量然后右键选择add selected text to watchs
js面向对象
-
类定义
class 类名 { // 不需要提前定义属性字段 constructor(属性1, 属性2) { this.field1 = 属性1; this.field2 = 属性2; } 方法名(参数...) { 方法体; return; } }
-
使用
let myobj = new 类名(); myobj.方法名()
字面量定义类
-
实际上是直接创建对象使用
let obj = { filed1: v1, filed1: v2 ..... }
- v也就代表类型
- String
- 数字
- 函数
- v也就代表类型
继承
- extends
js的RegExp
-
test(string)来验证一个字符串是否符合规则
-
创建
let reg1 = /^[1][358][0-9]{9}$/
Set
- 不能有重复元素
- 元素时有序