Javascript--HTML DOM基础知识

Posted 2022-08-02 blogzzy

1.html DOM是什么，以及它的作用：

　　w3c对DOM有一系列的解释和定义，用自己理解的话来说就是：HTML DOM是html的标准对象模型，可以使javascript去操作(获取，修改，删除，添加，)HTML对象。

2.DOM 如何获取HTML元素？

　　在DOM中访问HTML元素的方法有多种 ：

　　1.DOM 节点：

　　　　(在核心DOM中访问父子，兄弟节点)

　　　　node.parentNode  　　访问父节点

　　　　node.childNodes        　 访问所有子节点

　　　　node.firstChild　　　　访问第一个子节点

　　　　node.lastChild　　　　访问最后一个子节点

　　　　node.nextSibling　　　访问下一个兄弟节点

　　　　node.previousSibling　访问上一个兄弟节点

　　　　(由核心DOM精简出的HTML DOM访问父子、兄弟节点)

　　　　element.parentElement　　　　　　访问父元素

　　　　element.childern　　　　　　　　　访问所有子元素

　　　　element.firstElementChild　　　　　访问第一个子元素

　　　　element.lastElementChild　　　　　访问最后一个子元素

　　　　element.nextElementChild　　　　   访问下一个子元素

　　　　element.perviousElementChild 　　　访问上一个子元素

　　这两者之间的区别就在于 核心DOM无论访问的是父子节点还是兄弟节点 都会将空格，换行符当做节点 这就会造成使用的不便，而精简的HTML DOM 只会访问HTML中的元素。

　　2.DOM 方法

　　　　getElementById(id属性值)　　　　　　　　返回带有id的元素

　　　　getElementsByTagName(标签名)　　　　   返回指定标签名的所有元素 以数组的形式存储

　　　　getElementsByClassName(class属性值)　　返回是定类名的所有元素 以数组形式存储

　　　　getElementsByName(name属性值)

　　3.css选择器

　　　　document.querySelectorAll("")　　通过选择器获取元素  返回一个数组

　　　　document.querySelector("")　　　通过选择器获取元素  返回一个元素

3.DOM 如何修改HTML元素的内容、属性、样式

　　1.修改其内容(element表示某个元素)

　　　　对于双标签：element.innerHTML = “……”

　　　　对于单标签：element.value = " ……"

　　2.修改其属性

　　　　element.class = " " 修改class属性

　　　　element.href  =  " " 修改超链接href属性

　　3.修改其样式

　　　　element.style.fontSize = "16px"  修改字体大小

4.DOM 如何添加HTML元素

　　1.追加

　　　　element.appendChild(elem) 　　向父元素element追加一个子元素elem

　　2.插入

　　　　element.insertBefore(elem,oldElem)　　向父元素的oldElem元素前插入一个elem元素

　　3.替换

　　　　element.replaceChild(elem,oldElem)　　将父元素element的oldElem替换为elem元素

5.DOM如何删除HTML元素

　　parentNode.removeChild(elem)　　删除父节点的elem子节点