JS文档操作

一、dom树结构

  1.元素节点
  2.文本节点
  3.属性节点
        不属于元素节点的子节点
   4.文档节点(document)

二、处理元素节点
    method
    1.document.getElementById(); //根据ID
    2.document.getElementsByTagName(); //根据标签名
        返回名为NodeList的DOM对象,使用时建议先通过length属性检查其长度。
        获取节点有两种可选:
            a. 使用item方法
            b. 使用数组下标
    3.document.getElementsByClassName(); //根据Class,作为新成员,浏览器支持情况暂不太好
    4.querySelector()、querySelectorAll(); //通过CSS选择器,亦为新成员
        前者返回第一个匹配的元素,后者返回NodeList。
        e.g document.querySelector("#header");

三、处理属性节点
    method:
    1.getAttribute(); //获取属性
       建议先使用hasAttribute();
          e.g document.getElementById("pl").getAttribute("class");
    2.setAttribute(); //设置属性
    3.removeAttribute(); //移除属性
      建议先使用hasAttribute();
    4.hasAttribute();

四、处理文档节点
    直接通过innerHTML属性
    e.g

    a.document.getElementById("pl").innerHTML;
         b.document.getElementById("pl").innerHTML("<p>hello world</p>");

五、遍历DOM
    method:
    1.parentNode;
        e.g document.getElementById("pl").parentNode.setAttribute("class","liu");
    2.previousSibling;
    3.nextSibling;
    4.firstChild;
    5.lastChild;
        访问首尾两个子节点时,由于空白的原因,往往未必返回预期的子元素

六、DOM中动态添加移除节点
    method
    1.createElement();
    2.createTextNode();
    3.appendChild();
    4.removeChild();
    新增元素
    1.创建元素
    2.填充内容
    3.放入DOM
    e.g
        var tar=document.getElementById("pl");
        var p=document.createElement("p");
        var tex=p.createTextNode("hello world");
        tar.appendChild(tex);
    移除元素
    e.g 
        var tar=document.getElementById("pl");
        var t=document.getElementById("pll");
        tar.removeChild("t");

七、修改元素样式

  1.用JS修改标签的 class 属性值:
    更改一个标签的 class 属性的代码是:
    document.getElementById( id ).className = 字符串;
    className 是 DOM 对象的一个属性,它对应于标签的 class 属性。另外你也可以用上述的setAttribute()方法修改

  2.用JS修改标签的 style 属性值:
    style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。
    更改一个标签的 CSS 属性的代码是:

    document.getElementById( id ).style.属性名 = 值;
    style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。

JQuery文档操作

一、jQuery 文档操作方法

(1)html() 方法

a.定义和用法

  html() 方法返回或设置被选元素的内容 (inner HTML)。

  如果该方法未设置参数,则返回被选元素的当前内容。

语法:  $(selector).html(content)

e.g

  $("#userName").html(userData.username)

b.使用函数来设置元素内容

  使用函数来设置所有匹配元素的内容。

语法:   $(selector).html(function(index,oldcontent))

(2)关于jquery中html()、text()、val()的区别

  .html()用为读取和修改元素的HTML标签--对应js中的innerHTML 
    .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素
  .text()用来读取或修改元素的纯文本内容--对应js中的innerText 
    .text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上
  .val()用来读取或修改表单元素的value值   
    .val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
    关于三者的区别  
  1. val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不           
    一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。   
  2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

js和jq文档操作的更多相关文章

  1. (20)jQuery的文档操作(创建,添加、设置样式和删除等)

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...

  2. 2018-06-27 jq文档处理与jq对象属性操作

    jQ文档处理: 内部插入 A.append(B) ->把B后追加到A内部中 B.appendTo(A) ->把B后追加到A内部中 A.prepend(B) ->把B后追加到A内部中 ...

  3. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  4. 前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系

    JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...

  5. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  6. 06-jQuery的文档操作

    之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操 ...

  7. 06-jQuery的文档操作(重点)

    之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操 ...

  8. Jquery----对文档操作

    jquery对css操作: 1.CSS .css() - .css("color") -> 获取color css值 - .css("color", &q ...

  9. python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

随机推荐

  1. PHP中的MySQLi扩展学习(五)MySQLI_STMT对象操作

    就像 PDO 中的 PDO_Statment 对象一样,MySQLI_STMT 对象也是一个预处理语句所形成的对象,专门用来操作 MySQLi 所生成的预处理语句的.其实操作方式之类也都比较相似,不外 ...

  2. deecms栏目页调用自定义字段方法

    {dede:arclist addfields='suoxu_jifen,shichang_jiage' typeid='13' row='15' channelid='3'} <li>& ...

  3. python json格式化打印

    编写python脚本,调试的时候需要打印json格式报文,直接打印看不出层次,可以使用json.dumps格式化打印 import json import requests def test_json ...

  4. [原创]配置php+nginx 时遇到的”file not found","access denied"奇怪问题的解决过程

    在centos 7中按照我的随笔转载文章"[转载]CentOS 下安装LEMP服务(Nginx.MariaDB/MySQL和PHP)"安装好后,结果无法显示phpinfo()信息, ...

  5. 好未来数据中台 Node.js BFF实践(一):基础篇

    好未来数据中台 Node.js BFF实践系列文章列表: 基础篇 实战篇(TODO) 进阶篇(TODO) 好未来数据中台的Node.js中间层从7月份开始讨论可行性,截止到9月已经支持了4个平台,其中 ...

  6. Node.js躬行记(12)——BFF

    BFF字面意思是服务于前端的后端,我的理解就是数据聚合层.我们组在维护一个后台管理系统,会频繁的与数据库交互. 过去为了增删改查会写大量的对应接口,并且还需要在Model.Service.Router ...

  7. 憋了很久,终于弄懂什么是IOC(控制反转)

    导航 共享充电宝 IOC思想 复杂的依赖关系 IOC定义 Spring中的IOC IOC与工厂模式 IOC容器的技术剖析 结语 参考   本节是摘自<Spring Boot 实战纪实>的第 ...

  8. Stream之高级函数

    上回文说到了有关Stream一些数学函数的用法.今天来说下Stream一些高级的函数用法,这些函数在日常工作中也是必不可少的,测试数据还是引用上一篇的数据. Map 这个方法我个人称之为转换函数,把一 ...

  9. CEF使用过程问题合集

    CEF使用过程问题合集 1.Couldn't mmap icu data file 解决方案:检查程序执行目录下是否有icudtl.dat文件,如果没有请从cef的Resources文件夹中复制一份. ...

  10. FastAPI 学习之路(五)

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四)  我们之前的文章分享了 ...