DOM—Document Object Model
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主形象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。DOM不能改变CSS(通过行间样式间接改变)也有人称DOM是对HTML以及XML的标准编程接口。
通过JS改变HTML代码
我们在HTML文件中定义几个标签
345
而怎样通过JS调用这些标签呢? 我们先选出标签 通过var sex = document.getElementById(‘sex’);—Id为唯一标识
var demo = document.getElementsByClassName(‘demo’);—此时是一个数组 数组中包含demo,所以如果我们要拿出想要的元素 则
var demo = document.getElementsByClassName(‘demo’)[0];–其余同理(id除外)
var fruit = document.getElementsByName(‘fruit’)[0];
var p = document.getElementsByTagName(‘p’)[0];
拿出来之后,我们便可以进行修改来操控HTML。
我们还可以插入新的标签进入HTML中。
首先先定义,再插入。
var newDiv = document.createElement(‘div’);------创建
document.body.appendChild(newDiv);------插入
除了增,我们也可以删除标签
newDiv.remove();
遍历节点树
parentNode–>父节点(最顶端的parentNode为#document)
childNodes–>子节点们
firstChild–>第一个子节点
lastChild–>最后一个子节点
nextSibling–>后一个兄弟节点
previousSibling–>前一个兄弟节点
而节点包括:元素节点,属性节点,文本节点,注释节点等
div.firstChild = “123”
div.lastChild = “234”
遍历元素的节点树
parentElement–>返回当前元素的父元素节点,与parentNode不同的点:最顶端不为#document
children–>只返回当前元素的元素子节点
node.childElementCount === node.children.length --> 当前元素子节点个数
firstElementChild --> 返回的是第一个元素节点
lastElementChild --> 返回的是最后一个元素节点
nextElementSibling–>返回后一个兄弟元素节点
previousElementSibling–>返回前一个兄弟元素节点
节点的四个属性
一.nodeName–>返回元素标签名 字符串 以大写形式表示,只读,不能改
var strong = document.childNodes[1];
//document.childNodes[1].nodeName = “STRONG”
div.childNodes[1].nodeName = ‘abc’;//更改不了
二.nodeValue–>Text(文本)节点或Comment(注释)节点的文本内容,可读写 返回元素值,可更改
var div = document.childNodes[0];
//document.childNodes[0].nodeValue—“123”
document.childNodes[0].nodeValue = 789;
//document.childNodes[0].nodeValue—“789”
三.nodeType–>返回该节点的类型,只读,返回数字代表
节点的类型
元素节点—1
属性节点—2
文本节点—3
注释节点—8
document—9
DocumentFragment—11
四.attributes–>该元素的属性节点的集合
判断该元素有没有子节点的方法Node.hasChildNodes() 返回true or false。