DOM 定义了访问和操作HTML文档的标准方法

访问(查找标签)
---- 直接查找
  document.getElementById(“idname”)
  document.getElementsByTagName(“tagname”)
  document.getElementsByName(“name”)
  document.getElementsByClassName(“name”)

---- 导航属性
  NodeElement.parentElement // 父节点标签元素
  NodeElement.children // 所有子标签
  NodeElement.firstElementChild // 第一个子标签元素
  NodeElement.lastElementChild // 最后一个子标签元素
  NodeElement.nextElementtSibling // 下一个兄弟标签元素
  NodeElement.previousElementSibling // 上一个兄弟标签元素

操作
1 文本操作
取值操作
  element.innerHTML (关于标签的操作)
  element.innerText (关于文本操作)
赋值操作:
  element.innerHTML=""
  element.innerText=""

2 属性操作 <div key1=value1 key2=value2>DIV</div>
取属性值: (1)element.getAttribute(属性名) 。

      (2)element.属性名 (推荐)

赋值操作: (1)element.setAttribute(属性名,属性值) 。

      (2)element.属性名=属性值

关于class属性:
  element.classlist.add("class值")
  element.classlist.remove("class值")

关于select标签:
  ele_select.options.length=0 清空操作
  ele_select.selectedIndex 选中option的索引值

关于style属性:实现对标签的css操作
  element.style.样式属性="值"

3 节点操作

-----添加标签
生成一个标签:var ele_create=document.createElement("标签名")
  // <p></p> <img>

添加标签:

   父标签.appendChild(添加标签对象)
     insertBefore

-----删除节点:

   父标签.removeChild(查找到的标签对象)

-----替换节点:
  父标签.replaceChild(newnode,查找到的标签对象)

----- 拷贝一个节点
  node.cloneNode(true)  //true表示同时拷贝子节点

DOM两种绑定事件方式
方式1
<script>
function foo(self){
alert(123)
// self: <p onclick="foo(this)"></p>
}
</script>
<p onclick="foo(this)"></p>

方式2
一个标签对象.on事件=function(){
alert(456)
// this:绑定事件的标签对象
}

具体事件

点击事件 onclick
获取/失去焦点 onfocus onblur
内容发生变化 onchange (selecte)
onmouse 与鼠标相关的事件
提交事件:onsubmit
加载事件:onload

JavaScript DOM大纲的更多相关文章

  1. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  6. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  7. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  8. JavaScript DOM 编程艺术(第2版)读书笔记(1)

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  9. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

随机推荐

  1. bzoj 1564 [NOI2009]二叉查找树(树形DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1564 [题意] 给定一个Treap,总代价为深度*距离之和.可以每次以K的代价修改权值 ...

  2. 20145234黄斐《Java程序设计》第五周

    教材学习内容总结 第八章部分 - 异常处理 语法与继承架构 使用try...catch 首先要明确一点:Java中所有错误都会打包为对象 JVM会尝试执行try区块中的程序代码,如果发生错误,执行程序 ...

  3. 基本控件文档-UIKit结构图

    CHENYILONG Blog 基本控件文档-UIKit结构图 Fullscreen   UIKit结构图 技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博htt ...

  4. CF 1008C Reorder the Array

    You are given an array of integers. Vasya can permute (change order) its integers. He wants to do it ...

  5. vue中使用localStorage存储信息

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...

  6. MySQL异步复制、半同步复制详解

    MySQL数据复制的原理图大致如下: 从上图我们可以看出MySQL数据库的复制需要启动三个线程来实现: 其中1个在主服务器上,另两个在从服务器上.当发出START SLAVE时,从服务器创建一个I/O ...

  7. 洛谷P3378堆

    传送门啦 #include <iostream> #include <cstdio> #include <cstring> #include <algorit ...

  8. three.js是什么,能干嘛,和webgl什么关系

    如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用.你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上创建各种交互组件.现在这个功能集合里又有了一个新成员 ...

  9. python3 安装

    Centos7 安装python3 #安装sqlite-devel yum -y install sqlite-devel #安装依赖 yum -y install make zlib zlib-de ...

  10. Python基础 - MySQLdb模块

    安装 pip install MySQLdb 使用 去除一个数据库中所有的表 import MySQLdb def db_test(): conn = MySQLdb.connect(user='&l ...