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子节点
原文地址:https://www.cnblogs.com/blogzzy/p/11374060.html