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. print函数

    python中print既可以写成print a,也可以写成print(a) >>> a=1 >>> print a 1 >>> print(a) ...

  2. Android自定义View自定义属性

    1.引言 对于自定义属性,大家肯定都不陌生,遵循以下几步,就可以实现: 自定义一个CustomView(extends View )类 编写values/attrs.xml,在其中编写styleabl ...

  3. 灵活QinQ配置

    华为交换机灵活QinQ配置列子 配置vlan2 为内层vlan vlan100 为外层vlan #用户端 Gi // qinq vlan-translation enable port hybrid ...

  4. PHP 可变长度参数列表

    In PHP 5.6 and later, argument lists may include the ... token to denote that the function accepts a ...

  5. 用Dictionary替换switch case

    用switch case处理一个很长的判断,例如56个民族01代表汉族,02代表藏族,03代表壮族...,当传入数字想获取民族名称时就得写56个case,当传入民族获取背后的数字时,又得再写56个ca ...

  6. zabbix脚本报警

    zabbix问端设置: 1,设置报警类型 2.设置用户及媒体类型 send_to 就是zabbix输出的$1,脚本中药发给谁 3.设置触发器和动作 触发器 test.temp_conn (自己写一个简 ...

  7. yii2中gii外网访问的配置方法

    if (YII_ENV_DEV) { // configuration adjustments for 'dev' environment $config['bootstrap'][] = 'debu ...

  8. hdu3247Resource Archiver（ac自动机+spfa)

    链接 这题没想到怎么做,问了下p队长,大悟.. 先求出任意两串的在trie树上的最短距离,期间是不能走到不合法的地方,我是用spfa求得,在更新和加入节点时判断一下是不是合法位置. 求出最短距离之后, ...

  9. dubbo配置文件xml校验报错

    配置dubbo服务xml后,程序能正常执行,但validate会出现一些异常: Multiple annotations found at this line: - cvc-complex-type. ...

  10. Authentication和Authorization的区别

    搞不太清楚Authentication和Authorization的区别,在网上搜了一下,lucky16的一篇文章讲的通俗,看了就懂,记录下来: 你要登机,你需要出示你的身份证和机票,身份证是为了证明 ...