dom操作

1、找到元素(标签对象)

  标签名:

    document.getElementsByTagName()[];  //返回的是数组类型,需要有下标来找内容

  属性:

    document.getElementById();  //id属性值

    document.getElementsByName()[];  //name属性值  返回的是数组类型,需要有下标来找内容

    document.getElementsByClassName()[];  //class属性值

2、操作元素

  操作内容:

    非表单元素:

      标签对象.innerHTML  //获取标签内容

      标签对象.innerHTML = 内容  //修改标签内容

    表单元素:

      标签对象.value  //获取标签内容

      标签对象.value = 内容  //修改标签内容

    操作属性:

      标签对象.getAttribute("属性名")   //获取标签属性值

      标签对象.setAttribute("属性名","属性值")  //设置标签属性值

    操作样式:

      标签对象.style.color   //获取标签样式值

      标签对象.style.color = "red";  //设置标签样式值,要带双引号

0323-DOM基础操作的更多相关文章

  1. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  2. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

  3. javascript DOM基础操作

    DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...

  4. jQuery~DOM基础操作

    操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...

  5. DOM基础操作实战代码

    对于已经讲解给大家的DOM实战,我今天给大家几个实战代码,可以让大家加深对此的理解! 1.用DOM动态生成这样一个结构: <div class=”example”> <p class ...

  6. DOM基础操作(三)

    DOM剩余的两个操作一并带来! 1.删除操作 removeChild 这个方法依然是父级调用的,参数就是要删除的子节点,其实实际上是剪切,这个方法会把我们删除掉的元素给返回,我们可以用一个变量去保存这 ...

  7. DOM基础操作(二)

    插入操作 1.appendChild(child); 这个是父级调用的方法,它会将child元素插入到父级里面,而且是放到逻辑后面的位置上.   div.appendChild(comment);   ...

  8. DOM基础操作(一)

    DOM的基本操作有四种,我们会逐一给大家进行展示 增加操作 1.创建元素节点 createElement 我们可以通过document.createElement(‘div’);这个方法来创建一个元素 ...

  9. DOM基础操作

    本文地址:http://www.cnblogs.com/veinyin/p/7606972.html  1 访问 HTML 元素 常用方法 document.getElementById(" ...

  10. DOM基础及DOM操作HTML

     文件对象模型(Document Object Model.简称fr=aladdin" target="_blank">DOM).是W3C组织推荐的处理可扩展标 ...

随机推荐

  1. 需求分析&原型改进

    需求&原型改进 一.给目标用户展现原型,与目标用户进一步沟通理解需求. 1.用户痛点:需要随时随地练习四则运算,并能看到用户的统计数据. 2.用户反馈:较好地解决练习需求,若能加入班级概念则更 ...

  2. 201621123054 《Java程序设计》第六周实验总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 2 ...

  3. tornado options

    tornado.options.define() 用来定义options选项变量的方法,定义的变量可以在全局的tornado.options.options中获取使用,传入参数: name 选项变量名 ...

  4. 自主学习之RxSwift(二) -----flatMap

    最近项目中有这么一个需求,下面是三个网络请求 A.从服务器获取到时间戳(GET 方法,获取 timeLine) B.进行用户头像上传,获得回传的URL(POST方法,参数为 userId, timeL ...

  5. 从Nest到Nesk -- 模块化Node框架的实践

    文: 达孚(沪江Web前端架构师) 本文原创,转至沪江技术 首先上一下项目地址(:>): Nest:https://github.com/nestjs/nest Nesk:https://git ...

  6. Node入门教程(4)第三章:第一个 Nodejs 程序

    第一个 Nodejs 程序 本教程仅适合您已经有一定的JS编程的基础或者是后端语言开发的基础.如果您是零基础,建议您先学一下老马的前端免费视频教程 第一步:创建项目文件夹 首先创建 demos 文件夹 ...

  7. JAVA_SE基础——69.Date类

    package cn.itcast.other; import java.text.ParseException; import java.text.SimpleDateFormat; import ...

  8. Mego开发文档 - 保存关系数据

    保存关系数据 由于没有对象的更改跟踪,因此关系的操作需要开发者明确指定,在成功执行后Mego会影响到相应的关系属性中. 添加关系 在以下示例中如果成功执行则source的Customer属性会变为ta ...

  9. Angular组件——父组件调用子组件方法

    viewChild装饰器. 父组件的模版和控制器里调用子组件的API. 1.创建一个子组件child1里面只有一个greeting方法供父组件调用. import { Component, OnIni ...

  10. SpringBoot+Angular2 开发环境搭建

    https://segmentfault.com/a/1190000007921675