一、DOM概念
当我们的整个网页被加载后,我们的js引擎会将我们网页上的每一个标签封装成一个对象,这些对象统称dom对象,我们通过操作这些dom对象来完成一些效果,就叫做dom编程。
二、查询标签对象
通过document对象获取,document代表一个页面。
第一种方式:通过document对象的集合
作用:获取多个或者同类的标签对象
all:获取所有标签对象
forms:获取from标签对象
images:获取img标签对象
links:获取a标签对象
第二种方式:通过关系查找标签对象
父节点: parentNode属性
子节点: childNodes属性
第一个子节点: firstChild属性
最后一个子节点: lastChild属性
下一个兄弟节点: nextSibling属性
上一个兄弟节点: previousSibling属性
第三种方式:通过document方法查询标签对象
document.getElementById("id属性值"); 最常用
注意:使用该方法获取的标签一定要有id属性,在同一个html页面中不要出现两个同名的id
documetn.getElementsByName("name属性值"); 获取同name属性名的标签列表
注意:使用该方法获取的标签一定要有name属性
document.getElementsByTagName("标签名") 获取相同标签名的标签列表
三、修改标签对象
innerHTML属性:修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>innerHTML : 设置的标签内的html
value属性: 修改value属性值。 input type="text"
src属性: 修改图片的src属性。 <img src=""/>
checked属性:修改单选或多项的默认值。 <input type="radio/checked" checked=""/> 爱好全选
四、正则表达式
[a-z]: 表示匹配字母
*:0或多个元素
+:1个或多个元素
? :0或1个元素
{n,m} 大于n,小于m的个数
正则方法: test(): 用于匹配指定的字符串. true:表示匹配成功 ; false; 表示匹配失败
注意:
在js的正则表达式中,只要遇到了符合规则的内容,就代表匹配成功!
如果需要和java一样完全匹配,需要添加边界符号:开始标记: ^结束标记: $