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. SQL疑难杂症【5 】大量数据查询的时候要考虑结果为空的情况

    最近几天怪事儿出奇的多,同一个工单.同一个产品,在A线可以正常生产,但是在H线死活都无法生产,系统直接提示TimeOut,监控发现有一条SQL语句执行缓慢,Copy出来仔细查看,很简单的一条语句,如下 ...

  2. git学习笔记总结

    git试免费的开源的分布式版本控制系统,github是一个用git做版本控制的项目托管平台.说白了git就是帮忙你管理你开发的代码,代码每次修改的历史,多人更好的一起开发项目. 分布式版本控制系统,每 ...

  3. python 中的[::-1]

    for value in rang(10)涉及的数字倒序输出: for value in rang(10)[::-1]涉及的数字倒序输出: 一.反转 二.详解 这个是python的slice nota ...

  4. String和StringBuffer、StringBuilder的区别

    目录: 1.String类的不可变性 2.用String的时候需要注意什么 3.String与StringBuilder的区别 4.StringBuilder和StringBuffer的区别 Stri ...

  5. jquery 返回上一页 ，关闭js代码

    1.关闭功能: $(“#guanbi”).live("click",function()){ window.close(); } 2.返回上一页: <a href=" ...

  6. Mac 安装mysql

    下载mysql-5.7.14-osx10.11-x86_64.tar # 移动解压后的二进制包到安装目录 sudo mv mysql-5.6.24-osx10.9-x86_64 /usr/local/ ...

  7. SSH框架的配置

    ^_^阅读本文前请先浏览 : http://www.cnblogs.com/LiJinfu/p/5842890.html 步骤 : 一.编写web.xml配置文件 该文件路径在项目文件下的WebCon ...

  8. Django1.9开发博客（6）- 模板继承

    模板继承就是网站的多个页面可以共享同一个页面布局或者是页面的某几个部分的内容.通过这种方式你就需要在每个页面复制粘贴同样的代码了. 如果你想改变页面某个公共部分,你不需要每个页面的去修改,只需要修改一 ...

  9. js格式化数字和金额

    格式化数字,格式化金额: function number_format(number, decimals, dec_point, thousands_sep) { /* * 参数说明: * numbe ...

  10. 编程之美--2. Trie树 （Trie图）

    #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助, ...