JS(JavaScript)

一.Document对象

1.Document对象是什么

  • Document对象

是DOM的基本规范也是重要的对象之一，以访问，更新页面内容的属性和方法
通过conslie。log()方法来Document对象打印，测试该对象的属性和方法

<body>

<script>

    /*

        document对象

        * DOM预定义 - 已经被创建完毕了 - 允许直接使用

        * 得到的是HTML页面的源代码 - 该对象代表当前HTML页面

     */

    console.log(document);

    // document的确是一个JavaScript对象

    console.log(document instanceof Object);// true

    // document对象的属性和方法被定义在原型上

    console.log(Document.prototype);

    // 不再需要我们创建了

    var document = new Document();

    console.log(document);

</script>

</body>
  • 继承链关系
<body>

<script>

    // document对象是继承于Node的

    console.log(Document.prototype instanceof Node);

    // node对象是继承于EventTarget的

    console.log(Node.prototype instanceof EventTarget);

    console.log(Document.prototype instanceof EventTarget);

    // DOM中的对象之间的继承关系远比语法中的继承关系复杂

    console.log(Document.prototype instanceof HTMLDocument);

</script>

</body>

2.定位页面元素

  • getElementById()方法

该属性特点是唯一不可重复

<body>

<button id="ben">按钮</button>

<div id="q1"></div>

<script>

    var buttonElement = document.getElementById('btn');

//    通过Document对象getElementById()方法定义元素

    console.log(buttonElement instanceof Object);//true

    /*

    * 打印测试结果-对应元素HTML代码

    * DOM是使用还是地道都应该是对象

     */

    console.log(buttonElement instanceof HTMLButtonElement);

    /*

    * DOM提供一系列对象-对应HTML页面每个元素

    * <button>元素都具有HTMLButtonElement对象

    * <div>元素都具有HTMLDivElement对象

     */

    var q1 = document.getElementById('q1');

    console.log(q1 instanceof HTMLDivElement);//true

</script>

</body>
  • getElementsByName()方法

name是参数表示定位元素name属性值
name属性不唯一 - 得到结果可能是一个或多个

<body>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<script>

    var buttonElements = document.getElementsByName('btns');

//    name属性不唯一 - 得到结果可能是一个或多个

    console.log(buttonElements[0]);

    console.log(buttonElements instanceof NodeList);//true

    /*NodeList集合-类数组对象

    * 得到每个对应元素，通过索引值

     */

</script>

</body>
  • 节点集合NodeList
<body>

<button class="btns" id="btn">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<script>

    var btnElements = document.getElementsByClassName('btns');

    console.log(btnElements);//HTMLCollection

/*    console.log(btnElements.length);//5

//    打印当前集合长度

    var btn = document.getElementById('btn');

//    删除当前集合中某个元素

    var body = document.body;

    body.removeChild(btn);

    console.log(btnElements.length);//4

//    再一次打印当前集合长度

 */

    var buttonElements = document.querySelectorAll('.btns');

    console.log(buttonElements);//NodeList

    console.log(buttonElements.length);//5

    //    打印当前集合长度

    var btn = document.getElementById('btn');

    //    删除当前集合中某个元素

    var body = document.body;

    body.removeChild(btn);

    console.log(buttonElements.length);//5

    //    再一次打印当前集合长度

</script>

</body>
  • getElementsByTagName()方法

name是参数，表示定位元素的元素名
elements是返回值

<body>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<button name="btns">按钮</button>

<script>

    var buttonElements = document.getElementsByTagName('button');

//    HTMLCollection集合-类数组对象

    console.log(buttonElements[0]);

</script>

</body>
  • 定位元素元素属性
<body>

<button class="btns" id="btn">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<script>

    console.log(document.documentElement);

//    获取到根元素(HTML)

    console.log(document.head);

//    获取到头部(head)

    console.log(document.body);

//    获取到文件内容(boby)

    console.log(document.images);

//    获取到页面所有的图片(images)

</script>

</body>
  • getElementsByClassName()方法

names是参数，表示定位元素的class属性值
names参数是可以是一个样式属性名称或多个样式属性名称

<body>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<script>

    var buttonElement = document.getElementsByClassName('btns');

//    HTMLCollection集合-类数组对象

    console.log(buttonElements);

</script>

</body>
  • querySelector()方法

是通过CSS选择器定位第一个匹配元素
selectors是参数表示选择器以多个逗号分隔，并包含一个或多个CSS选择器
element是返回值

<body>

<button id="btn">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<button class="btns">按钮</button>

<script>

    var buttonElement1 = document.querySelector('#btn');

    console.log(buttonElement1);

    //    方法返回是第个匹配元素

    var buttonElement2 = document.querySelector('.btns');

    console.log(buttonElement2);

    var buttonElements = document.querySelectorAll('.btns');

    console.log(buttonElements);

    //    querySelectorAll()方法返回的是NodeList集合

</script>

</body>

3.创建页面元素

  • 创建元素节点

tagName是参数，表示创建元素节点
element是返回值

<body>

<script>

    var btn = document.createElement('button');

//    创建<button>元素

    var body = document.body;

//    获取<body>元素

    body.appendChild(btn);

//    向<body>元素增加子节点

</script>

</body>
  • 创建文本节点

data是参数，表示文本节点的内容(字符串)
textNode是返回值

<body>

<script>

    var btn = document.createElement('button');

//    创建<button>元素

    var textNode = document.createTextNode('按钮');

//    创建文本节点

    btn.appendChild(textNode);

//    向<button>元素增填子节点

    var body = document.body;

//    获取<body>元素

    body.appendChild(btn);

//    向<body>元素增添字节点

</script>

</body>
  • 创建属性节点

name是参数是指属性节点的名称
attributeNode是返回值

<body>

<script>

    // 1.创建<button></button>元素

    var btn = document.createElement('button');

    // 2.创建文本节点

    var textNode = document.createTextNode('按钮');

    // 3.向<button>元素添加子节点

    btn.appendChild(textNode);

    // 4.创建属性节点

    var attrNode = document.createAttribute('id');

    // 5.为属性节点设置值

    attrNode.nodeValue = 'btn';

    // 6.为<button>元素设置属性节点

    btn.setAttributeNode(attrNode);

    // 4.获取<body>元素

    var body = document.body;

    // 5.向<body>元素添加子节点

    body.appendChild(btn);

</script>

</body>

【JavaScript】DOM之Document对象的更多相关文章

  1. 使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  2. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  3. javascript之DOM(二Document对象)

    javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...

  4. 【温故而知新-Javascript】使用 Document 对象

    Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...

  5. HTML DOM部分---document对象；

    <style type="text/css"> #d3{ color:red} </style> </head> <body> &l ...

  6. JavaScript基础知识----document对象

    对象属性document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设 ...

  7. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  8. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  9. HTML DOM 实例-Document 对象

    使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...

随机推荐

  1. LeetCode No.136,137,138

    No.136 SingleNumber 只出现一次的数字 题目 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明:你的算法应该具有线性时间复 ...

  2. PAT甲级——1012 The Best Rank

    PATA1012 The Best Rank To evaluate the performance of our first year CS majored students, we conside ...

  3. VBE2014_Setup_20160709.rar

    VBE2014用于各种VBA编程环境的插件,包括VB6 安装本软件之后,在编程环境的“外接程序管理器”中,可以勾选/取消勾选. 在代码区域点击右键,可以对 过程.模块.工程级别的代码进行自动缩进. * ...

  4. 吴裕雄--天生自然 PHP开发学习：在CenterOS 7 系统安装配置PHP 7

    执行命令"yum install httpd"进行安装,然后在选择处,我们输入y,等待软件安装完毕.安装完成后,Apache配置文件路径是:/etc/httpd/conf/http ...

  5. css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况

    当大家开始做css3动画的时候,了解贝塞尔曲线就成了不可或缺的.“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数 ...

  6. centos 中文乱码解决办法

    缘由:本人在虚拟机中安装centos 5.3,起初安装时选择了english,后来使用的过程中发现打开网页,会出现中文乱码,无法正常显示.当然,本地文件中的中文更是无法显示. 若是将系统语言langu ...

  7. SAGE|DNA微阵列|RNA-seq|lncRNA|scripture|tophat|cufflinks|NONCODE|MA|LOWESS|qualitile归一化|permutation test|SAM|FDR|The Bonferroni|Tukey's|BH|FWER|Holm's step-down|q-value|

    生物信息学-基因表达分析 为了丰富中心法则,研究人员使用不断更新的技术研究lncRNA的方方面面,其中技术主要是生物学上的微阵列芯片技术和表达数据分析方法,方方面面是指lncRNA的位置特征. Bac ...

  8. stack|session|fuss|anniversary

    N-COUNT A stack of things is a pile of them. 摞; 堆 例: There were stacks of books on the bedside table ...

  9. Spring返回jsp页面

    1.SpringMVC返回的jsp,需要配置相应的viewResolvers,如: <property name="viewResolvers"> <list&g ...

  10. 吴裕雄--天生自然 oracle学习笔记：oracle理论学习详解及各种简单操作例子

    1. 数据库的发展过程 层次模型 -->网状模型 -->关系模型 -->对象关系模型 2. 关于数据库的概念 DB:数据库(存储信息的仓库) DBMS:数据库管理系统(用于管理数据库 ...