2019-07-17

续上篇JS的学习

第十五节、操作元素属性

1.获得元素的属性

方式一：元素对象.属性  例：

获得id名称是inp1对象节点

var inp1=document.getElementById("inp1");

var ty=inp1.type;

var  va=inp1.value;

var  na=inp1.name;

方式二：

var ty1=inp1.getAttribute("type");

2.操作元素的属性

方式一：inp1.type="button";

inp1.value="测试改变";

方式二：inp1.setAttribute("type","button");

第十六节、操作元素样式

1.获取元素样式的两种方法：

a:获得元素对象--->对象.style.样式类型

b:通过增加class类来增加对应的css样式

元素对象.calssName="值"；

2.缺点： 只是支持行内样式的css

注意： 对于 background-color格式的样式，在js中需要使用驼峰规则进行改变。

示例：

第十七节、操作元素文本和值

1.获取文本的两种方式：

a.元素对象.innerHTML

b.元素对象.innerText

2.innerHTML与innerText的区别

a.获得元素的文本内容

innerHTML会获得里面的HTML中的内容

innerText只会获得文本的信息

b.插入元素的文本内容

innerHTML  会识别HTML信息

innerText不会识别HTML的信息

注意： 双标签用innerHTML和innerText, 单标签获得的时候都是用value获得

特殊的双标签： select、textarea 获取文本值时使用value。

示例: 

第十八节：操作元素 

1.创建节点的方法

  document.createElement(“div")：

2.加入节点的方法

a.parentNode.appendChild(childElement)：末尾追加方式插入节点

b.parentNode.insertBefore(newNode,beforeNode)：在指定节点前插入新节点

3.删除节点的方法 :

parentNode.removeChild(childNode) :删除子节点

p.remove()：删除本节点

4.替换节点的方法 

 parentNode.replaceChild(newNode, oldNode)

示例：创建用户信息：

代码：

课外知识：inp2.onclick=function(){}z在函数中可以定义一个标签的事件。

第十九节：操作表单元素

1.readonly和 disabled ：

共同的特点： 可以看到数据， 但是不可以操作数据 

不同：

readonly（只读）： 里面的数据是可以提交到后台

disabled（不可用）：数据无法提交到后台 

2.控制表单提交的方式

  [1]  onsubmit="return checkName()"

 [2]  document.fom.submit();

 [3]  var  fom = document.getElementById("fom");

    fom.submit();

示例：

表单验证示例2：实现如下页面并实现表单验证

代码：

第二十节：prototype 属性

函数本身就是一个类，this代表本类的对象，与java不同，js对象可以创建属性和方法。

js是基于对象的脚本语言，prototype:间接实现了类的继承。