创建: 2017/10/12

初步完成: 2017/10/15
 
更新: 2017/10/14 标题加上【WIP】,继续完成
 
 
【TODO】
补充暂略的, 搜【略】

 DOM树
 概要  基本节点

 文档节点
 Document Node
 根节点Document
 呼出: document

 生成器
 construction
 HTMLDocument
 nodeType  9
 nodeName  "#document"
 nodeValue  null
 元素节点 

 生成器
 construction
 HTMLElement
 nodeType  1
 nodeName  大写的元素名
 nodeValue  null
 属性节点

 生成器
 construction
 Attr
 nodeType  2
 nodeName  属性名
 nodeValue  属性值
 文本节点

 空白节点   半角空格,tab,改行等
 html要素最开始和最后不生成空节点 
 生成器
 construction
 Text
 nodeType  3
 nodeName  "#text"
 nodeValue  文本内容, 字符串
 注释节点

 生成器
 construction
 Comment
 nodeType  8
 nodeName  "#comment"
 nodeValue  注释内容, 字符串
   
   
   
   
   
   
   
 节点对象的属性  注意: 不要这样子找节点,
空节点的存在影响结果!
     
   一般用class和id来找

 parentNode  呼出母节点
 Document没有母节点,返回null
 childNodes   呼出所有子节点的类似数组的对象(NodeList)
 firstChild  呼出第一个子节点
 没有返回null
 lastChild   呼出最后一个子节点
 没有返回null
 nextSibling  呼出下一个兄弟节点(母节点相同)
 previousSilbing  呼出上一个兄弟节点
 nodeType  说明节点的种类的数值

 1  要素节点
 3  文本节点
 9  根节点Document 
 nodeValue
 文本节点  文本
 要素节点  null
 nodeName
 要素节点  大写的要素名
 文本节点  "#text"
   
 表示html树的属性  无视文本节点,所以不会有空节点

 parentElement  获取母元素
 children  获取所有子元素的类似数组的对象(NodeList)
 firstElementChild  获取第一个子元素 
 lastElementChild  获取最后一个子元素 
 nextElementSibling  下一个兄弟元素
 previousElementSibling  上一个兄弟元素
 childElementCount  子元素的数量
 相当于 children.count
   
   
   
   
   
 节点对象(Node
Object)的取得
 通过ID获取
 单个
 ID不能重复,所有可以获取特定的一个

 函数  document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x(str);
 例  let id_test =
document.getElementByIdx_x_x_x_x_x_x_x_x_x_x_x('id-test');
   
   
   
 通过元素名获取
 多个
 不区别大小写
 获取所有同类元素

 函数  document.getElementsByTagName_r(str);
 例  let tag_test =
document.getElementsByTagName_r('h1');
 注意  复数形式,不要漏了s
 getElementsByTagName
   参数"*"可以获取所有的子元素
 document.getElementsByTagName_r("*");
   可以用于任何元素

返回的是NodeList, 只可读的类似数组的Object,带length
 会实时变化
 迭代时候复制成一个静态的
 var divs =
document.getElementsByTagName_r("div");
 var staticList = Array.prototype.slice.call(divs,
0);

 通过class名获取元素
 多个

 函数  document.getElementsByClassName(str);
 例  var color_test =
document.getElementsByClassName('color-test');
   复数形式,不要漏了s
   
   
 通过name获取元素
 多个

 函数  document.getElementsByName(str);
 例子 #
TODO:  暂略 
   复数形式,不要漏了s
 name属性  form, input这类控制表格的元素
 img,map,object等
 上述的可以设定
   
 用CSS选择器

 函数  document.querySelectorAll(str);
 例  document.querySelectorAll("body>h1:first-child");
 就是直接写css选择器
 只选匹配的第一个  document.querySeletor(str);
    不会实时变化
   
 接入用的属性  带[]的都是HTMLCollection对象,类似数组

 document.documentElement  文档根元素(html)的参照
 document.head  head的参照
 document.body  body的参照
 document.forms[]  
 document.images[]  img
 document.anchors[]  
 document.applets[]  html5以后是object标签
 document.embeds[]
 document.plugins[]
 HTML5新增
 embed
 document.scripts[]
 HTML5新增
 scirpt
   
   
   
   
   
 属性值的获取与设定
 元素的属性 《a id="

【WIP】客户端JavaScript DOM的更多相关文章

  1. 【WIP】客户端JavaScript Web Object

    创建: 2017/10/11   更新: 2017/10/14 标题加上[WIP],增加[TODO] 更新: 2018/01/22 更改标题 [客户端JavaScript Web Object, UR ...

  2. JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

  3. javaScript DOM JQuery AJAX

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

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

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

  5. JavaScript DOM动态创建(声明)Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  6. JavaScript DOM编程艺术第一章:JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  7. 【JavaScript权威指南(第五版)】笔记之第二部分 客户端JavaScript 第13章~第23章

    第十三章 Web浏览器中的javascript ①   eg:下面两行代码实际上执行的是相同的功能 var answer = 42; window.answer = 42;   ③每个window对象 ...

  8. JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)

    XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话.   大多数浏览的客户端JavaScri ...

  9. JavaScript 客户端JavaScript之 Web浏览器的环境

    Web浏览器实现的Javascript,通过Web浏览器实现的JavaScript引入了大量可脚本化的对象(1.Web浏览器 2.HTML 3.HTML中的内容)  Web浏览器中的Javascrip ...

随机推荐

  1. 王垠:写给支持和反对《完全用Linux工作》的人们

    王垠:写给支持和反对<完全用Linux工作>的人们 在一阵阵唾骂和欢呼声中,<完全用linux工作>被转载到了天涯海角.很多人支持我,也有很多人唾骂我.我不知道它是怎样流传到那 ...

  2. rem2

    html{font-size:50px;}body{font-size:24px;}@media screen and (min-width:320px){ html{font-size:21.333 ...

  3. Session共享实现方案调研

    1.背景 随 着互联网的日益壮大,网站的pv和uv成线性或者指数倍的增加.单服务器单数据库早已经不能满足实际需求.目前大多数大型网站的服务器都采用了分布式服务 集群的部署方式,所谓集群,就是让一组计算 ...

  4. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

  5. 网络基础——OSI参考模型

    一.OSI/ISO/IOS傻傻分不清楚 ISO 国际标准化组织(International Organization for Standardization)简称ISO,是一个全球性的非政府组织,是国 ...

  6. 被 idea 坑了的记录篇

    这个星期真的是波折的一周~~~~ 不得不吐槽下无敌坑的自己了,社会我娜姐,坑起来连自己都坑~~ 其实这也不全算我自己的坑,我只是卸载了idea,重新装了一下而已,很神奇的把idea的几个坑全撞了一遍( ...

  7. 表格头部header固定

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 关于ant引用android第三方工程打包的问题, invalid resource directory name: F:\workspace\Zlib\bin\res/crunch

    转载自 https://zhidao.baidu.com/question/200134399463655885.html invalid resource directory name: F:\wo ...

  9. Python学习笔记 (2.2)Python中的字符编码问题及标准数据类型之String(字符串)

    Python3中的String类型 首先,Python中没有字符类型,只有字符串类型.单个字符按照长度为1的字符串处理,这对于曾是OIER的我来说有点不适应啊. 字符串的表示方法 最常用的就是用一对双 ...

  10. HDU5266 LCA 树链剖分LCA 线段树

    HDU5266 LCA Description 给一棵 n 个点的树,Q 个询问 [L,R] : 求点 L , 点 L+1 , 点 L+2 -- 点 R 的 LCA. Input 多组数据. The ...