Dom基础概念：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 /*

 DOM : Document Object Model 文档对象模型

 文档：html页面

 文档对象：页面中元素

 文档对象模型：定义 为了能够让程序(js)去操作页面中的元素

 DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）

 DOM节点

 getElementById

 getElementByTagName

 document

 document.body

 */

 </script>

 </head>

 <body>

     <div id="div1">

         <p>11111111</p>

         <ul id="ul1">

             <li>11111</li>

             <li>22222</li>

             <li>33333</li>

             <li>44444</li>

         </ul>

     </div>

 </body>

 </html>

Dom树：

DOM节点
childNodes \ children

  • 获取第一级子元素
  • 有兼容性问题（空白节点）， nodeType属性

firstChild \ firstElementChild

  • 获取子元素里的第一个

lastChild \ lastElementChild

  • 获取子元素里的最后一个

nextSibling \ nextElementSibling

  • 获取指定元素的下一个兄弟节点

previousSibling \ previousElementSibling

  • 获取指定元素的上一个兄弟节点

parentNode

  • 获取父节点，点击链接隐藏整个li

parentNode&offsetParent区别

  • offsetLeft \ offsetTop
  • offsetWidth \ clientWidth

有兼容性问题，标准下不能获取两层
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
第三种方式的好处：自定义属性、相对网址

创建DOM元素
createElement(标签名)        创建一个节点
appendChild(节点)            追加一个节点
例子：留言板插入内容
插入元素
insertBefore(节点, 原有节点)    在已有元素前插入
例子：倒序留言板插入内容

删除DOM元素

  • removeChild(节点)        删除一个节点
  • 例子：删除留言

替换DOM元素

  • replaceChild(节点, 已有节点)    替换节点

Javascript DOM基础（一）概念的更多相关文章

  1. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  2. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  3. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

  4. Javascript DOM基础（二） childNodes、children

    childNodes知识点: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...

  5. javascript DOM基础操作

    DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...

  6. JavaScript Dom基础

    一.DOM查找 1.document.getElementById("id") -功能:返回对拥有指定ID的第一个对象的引用 -返回值:DOM对象 -说明:id为DOM元素上id属 ...

  7. Javascript DOM 02 在<ul>中创建、删除 <li>

    创建DOM元素 createElement(标签名)  创建一个节点 appendChild(节点)  追加一个节点 例子:为ul插入li 插入元素 insertBefore(节点, 原有节点)  在 ...

  8. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  9. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

随机推荐

  1. 改变Web Browser控件IE版本

    默认的webbrowser控件使用的渲染模式版本似乎是IE7,想要更改更高版本,如下: 在注册表位置 HKEY_CURRENT_USER\Software\Microsoft\Internet Exp ...

  2. Python3基础 sort(reverse=True) 将一个列表降序排列

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. SQL&&LINQ:左（外）连接，右（外）连接，内连接，完全连接，交叉连接，多对多连接

    SQL: 外连接和内连接: 左连接或左外连接:包含左边的表的所有行,如果右边表中的某行没有匹配,该行内容为空(NULL) --outer jion:left join or left outer jo ...

  4. Shell 语法之输入输出

    Linux 使用文件描述符标识每个文件对象.文件描述符是一个非负整数,可以唯一地标识会话中打开的文件.每个进程中最多可以有9个打开文件的描述符. Linux 标准文件描述符 文件描述符 缩写 描述 0 ...

  5. Android 利用SurfaceView进行图形绘制

    SurfaceView使用介绍 SurfaceView是View的一个特殊子类,它的目的是另外提供一个线程进行绘制操作. 要使用SurfaceView进行绘制,步骤如下: 1.用SurfaceView ...

  6. <!DOCTYPE> DTD基础

    1.什么是DTD? DTD(Document Type Definition)是文档类型定义. 2.DTD有什么用? 约定文档格式,规定元素,元素属性,元素关系,标签,实体等. 3.DTD分类 DTD ...

  7. 【matlab】查看程序运行时间

    程序开头 profile on 结尾 profile viewer 然后就会很贴心滴出现下面的界面,可以从中展开,查看每段运行的时间

  8. Karma Police - Radiohead

    音乐赏析似乎是一件没有意义的工作,与电影相比音乐更加抽象,不同的人对同一首歌会有完全不同的解读. 但一首歌一旦成为经典,就有解读它的必要,因为它一定诉出了一个群体的某些情绪. Karma police ...

  9. SPSS数据分析—卡方检验

    t检验和方差分析主要针对于连续变量,秩和检验主要针对有序分类变量,而卡方检验主要针对无序分类变量(也可以用于连续变量,但需要做离散化处理),用途同样非常广泛,基于卡方统计量也衍生出来很多统计方法. 卡 ...

  10. break和continue的区别

    break是结束整个循环体,continue是结束单次循环