节点(每个元素都会有的3个nodeValue nodeType nodeName;)

  1 元素节点 nodeName 元素节点名 nodeType 1 nodeValue null或者undefined

  2属性节点 nodeName 属性节点名 nodeType 2  nodeValue 属性节点的值

  3 文本节点 nodeName #text nodeType  3 nodeValue 文本值

2 创建元素节点 document.createElement('li')

3创建文本节点document.createTextNode("123");

4 属性节点 通过元素节点.属性名去创建或者 node.setAttribute(name,value);获取节点的属性值  node.getAttribute(name);移除节点的属性值 node.removeAttribute(name);

5追加节点 node.appendChild(newchild);

6 删除节点 node.parentNode.removeChild(node);

7 克隆节点 node.cloneNode(true);

8 替换节点node.replaceChild(nwchild, oldchild); 除了具有替换节点的功能,还具有移动节点的功能;可以自定义函数replaceEach(achild,bchild) 两个节点彼此替换位置;

9父节点 paraentNode  子节点 firstElementChild firstChild  lastElementChild   lastChild 下一兄弟节点nextSibling  nextElementSibling  前一兄弟节点previousSibling  previousElementSibling;

10节点的获取

  document.getElementById('');

   document.getElementsByTagName('');

  document.getElementsByClassName('')

  document.getElementsByName('');

学习总结--Dom的更多相关文章

  1. html学习笔记-DOM

    html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM ...

  2. 学习总结——DOM

    DOM(Document Object Model),即文档对象模型.DOM是针对HTML和XML文档的一个API,它描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.在定义方面, ...

  3. 原生js学习 选择dom

    连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...

  4. js学习笔记--dom部分(一)

    js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...

  5. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  6. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

  7. Vue.js_础学习之DOM操作

    demo说明: 1.{{message}}                           --“Mustache” 语法(双大括号) 2.v-bind:属性名                   ...

  8. 轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

  9. 学习WEBAPI(DOM)第二天

    目录 第二天学习目标: 一.阻止超链接的默认跳转行为 二.鼠标进入事件和鼠标离开事件 三.根据name属性值获取元素==>表单标签,返回的是伪数组 四.根据类样式的名字来获取元素,返回的是伪数组 ...

  10. Javascript学习,DOM对象,方法的使用

    JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...

随机推荐

  1. 洛谷 P1572 计算分数

    P1572 计算分数 题目描述 Csh被老妈关在家里做分数计算题,但显然他不愿意坐这么多复杂的计算.况且在家门口还有Xxq在等着他去一起看电影.为了尽快地能去陪Xxq看电影,他把剩下的计算题交给了你, ...

  2. [Transducer] Make an Into Helper to Remove Boilerplate and Simplify our Transduce API

    Our transduce function is powerful but requires a lot of boilerplate. It would be nice if we had a w ...

  3. HDU 2196 Computer(求树上每一个节点到其他点的最远距离)

    解题思路: 求出树的直径的两个端点.则树上每一个节点到其它点的最远距离一定是到这两个端点的距离中最长的那一个. #include <iostream> #include <cstri ...

  4. libevent的使用(socket)

    这篇文章介绍下libevent在socket异步编程中的应用.在一些对性能要求较高的网络应用程序中,为了防止程序堵塞在socket I/O操作上造成程序性能的下降,须要使用异步编程,即程序准备好读写的 ...

  5. windows电脑空间清理

    最近电脑空间又快满了,想下载一些好电影音频资源都要先临时清理一些文件才行,今天有时间就彻底整理一下,将整理过程及用到的好工具都记录一下,方面下次再遇到问题时可以很方面的参考执行. 1.分析磁盘空间占用 ...

  6. MetaSploit攻击实例讲解------Metasploit自动化攻击(包括kali linux 2016.2(rolling) 和 BT5)

    不多说,直接上干货! 前期博客 Kali linux 2016.2(Rolling)里Metasploit连接(包括默认和自定义)的PostgreSQL数据库 Kali linux 2016.2(Ro ...

  7. PHP万能的连接数据库

    <?php class DB{ const HOST='127.0.0.1'; const USER='root'; const PASS='root'; const DATA='mooc'; ...

  8. 为一个支持GPRS的硬件设备搭建一台高并发服务器用什么开发比较容易?

    高并发服务器开发,硬件socket发送数据至服务器,服务器对数据进行判断,需要实现心跳以保持长连接. 同时还要接收另外一台服务器的消支付成功消息,接收到消息后控制硬件执行操作. 查了一些资料,java ...

  9. gym 100971 J Robots at Warehouse

    Vitaly works at the warehouse. The warehouse can be represented as a grid of n × m cells, each of wh ...

  10. mac ssh报错处理

    总结一下 1.The authenticity of host '[192.168.1.100]:22 ([192.168.1.100]:22)' can't be established. RSA ...