2019-07-01 DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理。

1、web前端的js由哪几部分组成?
由3部分组成:
js基础语法 -变量,语句,函数,内置对象 ,运算
DOM
BOM

2、dom是什么,有什么用?
Document Object Model,文档对象模型,是一套操作HTML和XML文档的API。
学习DOM就是学习封装好的操作页面的API,API就是一些封装好的方法。
DOM由DOM节点组成,我们可以通过DOM去修改这些节点。

3、dom树是什么,dom节点又是什么?
dom树:
DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。
dom节点:
DOM是由DOM节点(文档节点)组成
HTML 文档中的所有内容都是节点

4、dom节点有哪些类型?
整个文档是一个文档节点;
每个HTML元素是元素节点;
HTML元素内的文本是文本节点;
每个HTML属性是属性节点;
注释是注释节点;

5、给父节点添加子节点用到哪些方法?
4种
createElement创建节点
cloneNode克隆节点
appendChild追加节点到某个元素后
insertBefore在元素前面添加节点

6、删除dom节点有哪些方法?
2种
m.removeChild(n)删除m元素中的n节点
m.remove(); 删除自己(自杀)

7、修改dom节点的内容有两个方法,它们有什么区别?
dom.innerText = '前端工程师';
dom.innerHTML = <button>前端工程师</button>;

8、如何修改dom节点的样式?
dom.style.border = "1px solid red"
dom.style.backgroundColor = "yellow"

9、如何修改dom节点的属性?
dom.setAttribute(name, value)

10、如何修改dom节点的class?
dom.className = 'aaa'; 给元素添加一个加aaa的class
dom.classList.add() | remove() , 添加或者删除,返回的是一个类名数组

11、获取dom节点的5种方法?
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelector("")
document.querySelectorAll("")

12、获取dom节点内容有哪些方法?
dom.innerText dom节点的内容,不包含标签
dom.innerHTML dom节点的内容,包含标签
dom.parentNode: 获取dom节点的父节点
dom.children: 获取dom节点的子节点,是一个数组
dom.nextElementSibling : 获取dom的下一个元素节点
dom.nextSibling :获取dom的下一个节点(包括元素节点)
dom.previousSibling dom.previousElementSibling 同上

13、如何获取dom节点的属性?
dom.getAttribute(name)
dom.xxx(比如dom.checked)
获取属性值(可以获的自定义属性的值)

14、如何获取dom节点的样式?
dom.style.xxx 比如dom.style.color,dom.style.fontSize(仅限内联样式,font-size要写成fontSize)
getComputedStyle(dom).color (任意式都可以), ComputedStyle => 有所有样式叠加之后的样式

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容