首页 > 代码库 > DOM
DOM
核心DOM
属性
firstChild 第一个子节点
? lastChild 最后一个子节点
? parentNode 父节点
? childNodes 子节点列表 列表是通过数组的方式来进行访问 就算子节点列表只有一个元素
那么也需要使用数组的方式来访问
? nodeName 节点名称
? nodeValue 节点的值、
? nextSibling 下一个兄弟节点
? previousSibling 上一个兄弟节点
方法
核心DOM对HTML标签的属性操作
<标签 属性=“值”>
设置或者修改标签的属性
要操作的标签对象.setAttribute(“属性名”,“属性值”)
查询标签的属性的值
要操作的标签对象.getAttribute(“属性名”)
移除标签的属性
要操作的标签对象.remove Attribute(“属性名”)
核心DOM对HTML标签的操作
<标签名 >
创建标签
语法:
document.createElement(“标签名”)
注意:
1、不管是单边标签还是双边标签 只需要写标签名即可! 不能有尖括号
2、创建好的标签它暂时是存在于内存中
追加节点 将要追加的标签对象追加到谁的最后面
要在什么标签标签进行追加.appendChild(要追加的标签对象)
父对象.insertBefore(要追加的节点, 在谁之前进行追加)
移除指定的节点
当前要移除的标签对象的父元素.removeChild(要移除的标签对象)
HTML DOM
方法
document.getElementById(id的属性值)
作用:
通过id的属性值来获取元素 谨记:这个方法一定是document对象来调用 并且它一次只能获
取到一个标签对象!
document.getElementsByTagName(标签名)|父对象. getElementsByTagName(标签名)
作用:
通过标签名来获取元素 它返回是一个数组 如果要访问其中的某一个标签对象 要使用下标
来进行访问! 就算这个数组里面的元素只有一个 那么也是要使用数组下标的方式来进行访问!
document.getElementsByTagName(标签名)
document.getElementsByName(“name的属性值”)
作用:
通过标签的name属性值来获取元素 它返回是一个数组 如果要访问其中的某一个标签对象
要使用下标来进行访问! 就算这个数组里面的元素只有一个 那么也是要使用数组下标的方式来进行访
问!
<input type=”text” name=”user” >
HTML DOM对标签的属性操作
注意:这里其实是没有内置的方法 只是我们能大家总结出来的功能!
增、改
语法:
要操作的标签对象.属性名 = “值”
删除
语法:
要操作的标签对象.属性名 = “”
这个操作与removeAttribute()这个方法的区别:
要操作的标签对象.属性名 = “” 只是把值给清空了 但是属性名还在
removeAttribute() 它会将属性名和属性值都给移除
查询
语法:
要操作的标签对象.属性名
注意:
以上对标签属性的操作均不包含对class属性的操作!如果要对class属性进行操作 一定要把 class这个属性名修改为className 才可以对class属性进行操作!
CSS DOM
css dom的作用:它主要是用来操作标签的style的属性 --?行内样式
设置或者修改:
语法:
要操作的标签对象.style.css属性 = “值”
获取:
语法:
要操作的标签对象.style.css属性
注意:
如果CSS属性是由2个或者以上的单词组成的,那么从第二个单词开始首字母要大写 并且要去掉中划线!
background-color =======? backgroundColor
DOM