发表于: 2020-03-20 09:45:23

0 1809


今天完成的事情:重新复习了关于dom的一些知识(感觉并没有很牢靠)
明天计划的事情:学习js的知识:8种基本数据类型;以及事件
遇到的问题:

XML dom 和html dom的关系大概是继承(这个是很久以前的东西,没找到答案)

XHTML 是html的版本并不是XML

对XML具体参考:

https://www.w3school.com.cn/xml/xml_intro.asp

收获:

重新学习了关于dom的概念并进行深究:

首先dom是个标准是个规范:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C文档对象模型也是dom;

编程接口也是dom的一种:定义了HTML和XML文档的逻辑结构和文档操作的编程接口。

总结:DOM是一种标准,他定义了html和xml文档的逻辑结构和文档操作的编程接口,这种接口是中立于平台和语言的,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

如果要简单好记:dom是一个标准,这个标准规定了文档对象怎么解析成dom树的,所以又被称为文档对象模型,编程接口则是对象方法和对象属性它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML DOM 是:

  • HTML 的标准对象模型,html
  • HTML 的标准编程接口,xml
  • W3C 标准


HTML DOM appendChild() 方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

提示:如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

你可以使用 appendChild() 方法移除元素到另外一个元素。

语法

node.appendChild(node)

参数

参数类型描述
node节点对象必须。你要添加的节点对象。

返回值

类型描述
节点对象添加的节点

技术细节

DOM 版本Core Level 1 Node Object




HTML DOM removeChild() 方法

removeChild() 方法指定元素的某个指定的子节点。以 Node 对象返回被删除的节点,如果节点不存在则返回 null。

语法

node.removeChild(node)

参数

参数类型描述
node节点对象必须。 你要移除的节点对象。

返回值

类型描述
节点对象移除的节点

技术细节

DOM 版本Core Level 1 Node Object


HTML DOM createElement() 方法

定义和用法

createElement() 方法通过指定名称创建一个元素

语法

document.createElement(nodename)

参数

参数类型描述
nodenameString必须。创建元素的名称。

返回值

类型描述
元素对象创建的元素节点

技术细节

DOM 版本Core Level 1 Document Object



HTML DOM replaceChild() Method

定义和用法

replaceChild() 方法可将某个子节点替换为另一个。

新节点可以是文本中已存在的,或者是你新创建的。

语法

node.replaceChild(newnode,oldnode)

参数

参数类型描述
newnodeNode 对象必须。你要插入的节点对象。
oldnodeNode object必须。你要移除的节点对象。

返回值

类型描述
Node object替换的节点

技术细节

DOM 版本Core Level 1 Node Object




HTML DOM childNodes 属性

定义和用法

childNodes 属性返回包含被选节点的子节点的 NodeList。

提示: 如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。如需循环子节点列表,使用 nextSibling 属性,要比使用父对象的 childNodes 列表效率更高。


浏览器支语法

element.childNodes

技术细节

返回值:NodeList 对象, 代表节点集合。
DOM 版本Core Level 1


这个返回值:是xml dom里的NodeList 对象所以每次使用都要打印出来看下,xml和html还是有不同


原生js修改html文本使用innerHtml,修改属性使用.style.属性 进行修改

(权重值高于内联但是小于!important)使用原生js获取css属性并修改:

判断的原因是ie不支持getcomputestyle而是有自己的currentStyle:

function getStyle(element, attr) {

        if(element.currentStyle) {

                return element.currentStyle[attr];

        } else {

                return getComputedStyle(element, false)[attr];

        }

}


从资源到dom树的构成的过程:






自适应和响应式的区别:

自适应:需要开发多套界面适应不同的屏幕宽度;响应式开发一套界面适应全部的屏幕宽度

理论上来说,响应式布局在任何情况下都比自适应布局好一些,但在某些情况下自适应布局更切实际。

自适应布局可以让你的设计更加可控,因为你只需要考虑几种状态就万事大吉了。

但在响应式布局中你可能需要面对非常多状态——是的,大部分状态之间的区别很小,但它们又的确是不同的,这样一来就很难确切搞清你的设计会是什么样。




返回列表 返回列表
评论

    分享到