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. 欧姆龙PLC---FINS/TCP

    ETN 21 以太网fins/tcp命令 (1)将电脑和PLC设置为同一个网段 例如电脑IP为192.168.18.214,PLC的IP为192.168.18.4(PLC的端口默认为9600) (2) ...

  2. javascript实现json页面分页

    下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  3. python 中的[::-1]

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

  4. linux chomd 学习

    chomd -R 777 directory_name :递归地给directory目录下所有文件和子目录的属主分配读的权限 ------2016-10-31 -- source: Linux chm ...

  5. JQuery的概述

    一.什么是 jQuery 1.jQuery是一个JavaScript库,jQuery 极大地简化了 JavaScript 编程.它通过封装原生的JavaScript函数得到一整套定义好的方法. 2.它 ...

  6. tomcat配置项目的图片路径不在项目下的处理

    <Host appBase="webapps" autoDeploy="true" name="localhost" unpackWA ...

  7. 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的

    在MVC中添加授权认证配置之后报了这样的错 原因是在整个MVC项目中有两个Web.Config文件存在authentication节点,一个Web.Config文件在View目录下,一个在根目录下 解 ...

  8. CentOS7下安装MYSQL5.7

    第一种方式:yum安装 1.下载mysql57-community-release-el7-9.noarch 下载地址:http://dev.mysql.com/downloads/repo/yum/

  9. [转]JAVA虚拟机的生命周期

    JAVA虚拟机体系结构 JAVA虚拟机的生命周期 一个运行时的Java虚拟机实例的天职是:负责运行一个java程序.当启动一个Java程序时,一个虚拟机实例也就诞生了.当该程序关闭退出,这个虚拟机实例 ...

  10. ssh传输文件

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...