一. 核心DOM 主要属性
l parentNode 父节点
l innerHTML 用来设置或者返回双边标记里面的内容
l nextSibling 下一个兄弟节点
要使用核心 DOM来操作HTML文档 访问HTML文档里面的标签 如果说要通过核心DOM来访问HTML的标签 一定是先根标签开始!
注意: 核心dom它会把换行空格都会理解为文本节点
因为使用核心DOM来操作HTML文档太过于繁琐,所以就出来了HTML DOM来操作HTML文档!
核心DOM对标签属性的操作
1).要找到操作的标签对象.setAttribute(属性名,属性值) 改
2).要找到操作的标签对象.getAttribute(属性名) 查
3).要找到操作的标签对象.removeAttribute(属性名) 删
核心DOM对标签的操作
创建标签
语法:
document.createElement(“标签名”)
注意:标签名不能带尖括号 但是创建好的标签它暂时是存放于内存中
追加标签
1).父对象.appendChild(要追加的标签对象)
将标签对象追加父对象的末尾
2).将标签对象追加谁的最前面
父对象.insertBefore(要追加的标签对象, 在谁之前进行追加)
移除标签
父对象.removeChild(要删除的标签对象)
二. HTML DOM方法
1).document.getElementById(ID的属性值)
作用:通过id的属性值来获取标签对象
注意:这个只能获取到一个标签对象 因为id的属性值是在一个HTML文档里面是唯一的!
2).document.getElementsByTagName(“标签名”)
父对象. getElementsByTagName(“标签名”)
作用:通过标签名来获取对象
注意:这里返回的是一个数组集合 需要使用下标来进行访问 就算获取到只有一个标签 它也是一个数组集合
3).document.getElementsByName(name的属性值)
说明:通过标签中的Name的属性值来获取元素
注意:这里返回的是一个数组集合 需要使用下标来进行访问 就算获取到只有一个标签 它也是一个数组集合
HTML DOM对标签属性的操作
标签中所所有的属性 ,这个JS对象也会同时拥有
1). 增
要操作的标签对象.属性名 = “值”
2).删
要操作的标签对象.属性名 = “”
3).改
要操作的标签对象.属性名 = “重新赋值”
4).查
要操作的标签对象.属性名
5).但是以上对标签属性的操作均不包含对class属性的操作 如果要对标签里面的class属性的操作 一定要把class改为className
格式:
要操作的标签对象.className
三.CSS DOM
CSS DOM它是用来操作标签的style属性的 这里的style它也是一个对象
格式:
赋值: 要操作标签对象.style.css样式属性 = “CSS属性值”
取值: 要操作标签对象.style.css样式属性
如果CSS样式属性是由两个或者以上的单词组成的 那么要将中划线去掉同时从第二个单词开始首字母要大写!