Javascript--HTML DOM基础知识

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.text/textcontent = " …… "

　　　　这两者的差别在于 innerHTML 修改的是包含标签的文本内容而text、textcontent修改的是纯文本内容

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

　　2.修改其属性

　　　　element.class = " " 修改class属性

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

　　　　当赋值为空时相当于移除这个元素的属性

　　3.修改其样式

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

　　　　获取标签的样式：getcomputedstyle("标签名") 通过这种方式获取到的样式只可以查看不可以修改

4.DOM 如何添加HTML元素

　　1.追加

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

　　2.插入

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

　　3.替换

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

　　向DOM树添加新元素的方法有多种，使用方法视情况而定，这里举例一种最常用的方法：

1.创建一个新的元素 var div = document.createElement("div")

2.设置其内容：div.innerHTML = " " (若是不需要添加内容可以省略)

3.追加到父元素或者HTML中：parent.appendChild(div)

需要注意的是由于每向DOM中添加一次元素都会重新对每个元素进行计算和定位非常耗时所以尽量将需要添加的元素结构先在内存中构造好再整体一次性添加到DOM树中

5.DOM如何删除HTML元素

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

巴特西

Javascript--HTML DOM基础知识

最新文章

热门文章