美文网首页
简单理解dom及js对dom的api操作。

简单理解dom及js对dom的api操作。

作者: 做个大树吧 | 来源:发表于2018-07-14 12:00 被阅读0次

什么是 HTML DOM?

简单的说就是HTML的文档对象模型,也就是关于如何修改,删除,添加,修改html的标准。

常见的js对dom的操作?

(1)此时把html元素都当成对象。

getElmentById()方法,返回带有指定id的元素。

(2)inneHTML获取元素的内容。

例如doucument.getElementById("app").innerHTML;返回具有id为app的HTML对象的(标签内)包含的内容。

访问元素节点的方法: getElementById() ,getElementsByTagName(), getElementsByClassName()

(3)HTML修改

常见的一般是修改元素,属性,样式和事件。

方法:document.getElementById("id").innerHTML="string";修改内容;修改样式例如document.getElementById("p2").style.color="blue";

如果需要向新的Html元素添加新的节点,首先需要创建新的节点,然后追加到已有元素上,例如:

var node=document.createElement("p");

ver r1=document.createTextNode("new text");

node.appendChild(r1);

也可以用insertBefore()方法,

移除节点,removeChild,替换元素replaceChild() 。

相关文章

  • 简单理解dom及js对dom的api操作。

    什么是 HTML DOM? 简单的说就是HTML的文档对象模型,也就是关于如何修改,删除,添加,修改html的标准...

  • 《React精髓》实践笔记 - Chapter 2

    React vs 原生JS DOM操作 运用原生JS API代码风格很重要,否则维护起来很困难,但是理解原生API...

  • 11 DOM 扩展

    本章内容 理解 Selectors API 使用 HTML5 DOM 扩展 了解专有的 DOM 扩展 对 DOM ...

  • 虚拟dom的概念

    dom本质: 浏览器的概念,用js对象来表示页面上的元素,并提供了操作dom对象的API DOM树的概念: 一个网...

  • DOM树知识点梳理

    1.HTML DOM2.获取节点的原生方法3.JS中的节点操作写几个常用的API, 来操作DOM节点。(1)doc...

  • 前端发展历史

    1.js操作html 利用原生的javascript (js包括ECMAscript BOM DOM)的DOM操作...

  • JS第七天-03

    DOM DOM树结构关系代码示例: 一、JS中标签关系 二、JS操作页面标签 三、JS操作DOM一般步骤 1、创建...

  • 12 DOM2 和 DOM3

    本章内容 DOM2 和 DOM3 的变化 操作样式的 DOM API DOM 遍历与范围 12.1 DOM 变化 ...

  • JavaScript02

    今日主要内容 常用API JSON字符串 JS自定义对象三种方式 DOM事件操作类型,JS对html和css的操作...

  • 面试中React与Vue的比对 / 面试/mvvm/virtua

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,...

网友评论

      本文标题:简单理解dom及js对dom的api操作。

      本文链接:https://www.haomeiwen.com/subject/poespftx.html