HTML+CSS+Javascript+jQuery+移动端响应式参考链接:JS:https://www.cnblogs.com/majj/category/1223635.html

JavaScriptDOM操作的常用方法和属性::
  • 常用方法:
  1. 获取节点:
    1. document.getElementById(idName)          //通过id号来获取元素,返回一个元素对象
    2. document.getElementsByName(name)       //通过name属性获取id号,返回元素对象数组
    3. document.getElementsByClassName(className)   //通过class来获取元素,返回元素对象数组(ie8以上才有)
    4. document.getElementsByTagName(tagName)       //通过标签名获取元素,返回元素对象数组
  2. 获取/设置元素的属性值:
    1. element.getAttribute(attributeName)     //括号传入属性名,返回对应属性的属性值
    2. element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值
  3. 创建节点Node:
    1. document.createElement("h3")       //创建一个html元素,这里以创建h3元素为例
    2. document.createTextNode(String); //创建一个文本节点;
    3. document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例
  4. 增添节点:
    1. element.appendChild(Node);   //往element内部最后面添加一个节点,参数是节点类型
    2. elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
  5. 删除节点:
    1. element.removeChild(Node)    //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null
 
  • 常用属性:
  1. 获取当前元素的父节点 :
    1. element.parentNode     //返回当前元素的父节点对象
  2. 获取当前元素的子节点:
    1. element.chlidren        //返回当前元素所有子元素节点对象,只返回HTML节点
    2. element.chilidNodes   //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)
    3. element.firstChild      //返回当前元素的第一个子节点对象
    4. element.lastChild       //返回当前元素的最后一个子节点对象
  3. 获取当前元素的同级元素:
    1. element.nextSibling          //返回当前元素的下一个同级元素 没有就返回null
    2. element.previousSibling   //返回当前元素上一个同级元素 没有就返回null
  4. 获取当前元素的文本:
    1. element.innerHTML   //返回元素的所有文本,包括html代码
    2. element.innerText     //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码
  5. 获取当前节点的节点类型:node.nodeType   //返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。
  6. 设置样式:element.style.color=“#eea”;      //设置元素的样式时使用style,这里以设置文字颜色为例。

javascript DOM 常用方法的更多相关文章

  1. javaScript DOM JQuery AJAX

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

  2. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

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

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

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

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

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

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

  6. javascript DOM 操作

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

  7. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  8. JavaScript : DOM文档解析详解

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

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

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

随机推荐

  1. 第四百一十六节,Tensorflow简介与安装

    第四百一十六节,Tensorflow简介与安装 TensorFlow是什么 Tensorflow是一个Google开发的第二代机器学习系统,克服了第一代系统DistBelief仅能开发神经网络算法.难 ...

  2. R par yaxp xaxp 显示x轴和y轴的刻度线

    R语言会自动根据数据的范围,在X轴和Y轴上标记合适的刻度 > options(scipen = ) > plot(sample(:, )) 生成的图片如下 通过par("yaxp ...

  3. Houdini技术体系 基础管线(二) :Heightfiled与UE4的无缝导入以及对World Composition的支持

    Authored by TraceYang 前言    传统的制作做比较真实大世界3D关卡地形时,通常的采用的方式是把HeightMap和SplatMap(Layer Mask)导入到引擎的地形系统里 ...

  4. SpringBoot系统列 2 - 配置文件,多环境配置(dev,qa,online)

    实现项目的多环境配置的方法有很多,比如通过在Pom.xml中配置profiles(最常见) 然后在Install项目打War包的时候,根据需求打不同环境的包,如图: 这种配置多环境的方法在SSM框架中 ...

  5. 教你如何让数据库支持emoji表情符存储

    From: http://www.cnblogs.com/janehoo/archive/2016/04/06/5359800.html 一.教你如何让数据库支持emoji表情符存储 解决方式:更换字 ...

  6. 从头配置,开发 cocos2dx 3.14.1

    要使用cocos2dx写一个麻将测试工具. 配置流程如下: 1. 下载安装最新版本的VS(VS2017): https://www.visualstudio.com/zh-hans/downloads ...

  7. 【数据库问题】sql server 获取MD5值结果不一致的问题 substring(sys.fn_sqlvarbasetostr(HashBytes('MD5','111111')),11,32)

    获取 111111 的MD5值 SELECT substring(sys.fn_sqlvarbasetostr(HashBytes(,) 执行结果:965eb72c92a549dd5a330112 但 ...

  8. GitLab push除发Jenkins事件

    1.打开Jenkins项目配置 2.勾选Trigger builds remotely (e.g., from scripts) 3.Authentication Token随便填个内容(比方1234 ...

  9. C# StackExchange.Redis 用法总结

    安装 StackExchange.Redis 在 NuGet 中搜索 StackExchange.Redis 和 Newtonsoft.Json,直接点击按钮安装即可. StackExchange.R ...

  10. Java泛型 T.class的获取

    public interface BaseDao<T> { T get(String id); } import java.lang.reflect.ParameterizedType; ...