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. stoneniqiu 理想就是自己喜欢做,并对社会和他人都有意义的事情！

    H5嵌入原生开发小结----兼容安卓与ios的填坑之路 2016-11-19 08:29 by stoneniqiu, 1038 阅读, 8 评论, 收藏, 编辑 一开始听说开发H5,以为就是做适配现 ...

  2. SQL语句中&、单引号等特殊符号的处理

    今天遇到一个insert语句,在SQL Tools(链接Oracle数据库)插入的某列值为“Computer Hardware & Software>>CPU",这样执行 ...

  3. Vector成员为指针时要注意的问题

    vector的复制是浅复制,所以复制一个包含动态内存的变量的对象的话就会出问题. 解决办法:自己写类的复制构造函数,为新对象的指针开辟新的内存空间. 但当vector离开作用域之后,只会把其成员所占的 ...

  4. mac 安装tomcat

    一.下载 首先在tomcat官网下载完整版的 tomcat.tar.gz包,Core下 注: zip用于windows操作系统,tar.gz用于unix和linux操作系统. Binary Distr ...

  5. do while(false)实用技巧

    今天看项目源码的时候发现有些地方用了do{} while(false)的用法,查了下发现这样确实有些优点,mark下. 1.最重要的优点,用在略微复杂的宏定义中. #define AB1 a; b; ...

  6. Android系统架构-----Android的系统体系架构

    一.Android的系统体系结构 在入门了一个简单的Android的Hello World以后,我们首先来看一下我们Android的整体系统架构图: 这个就是我们Android的整体系统架构图了,我们 ...

  7. Spring Boot Admin 的使用 2

    http://blog.csdn.net/kinginblue/article/details/52132113 ******************************************* ...

  8. python中的浅拷贝与赋值不同

    Python中的对象之间赋值时是按引用传递的,如果需要拷贝对象,需要使用标准库中的copy模块. 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2. copy.deep ...

  9. 【转】 memset()的效率以及源码分析

    void *memset(void *s, int ch, size_t n);作用:将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的大小由第三个参数指定,这个函数通常 ...

  10. eclipse注释模板及格式化模板导入步骤

    1.点击Window->Preference->Java -> Code Style -> Formatter 2.点击右侧Import选择*.xml模板文件导入即可 3.如果 ...