DOM

Posted 2020-08-23

核心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