<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .aa {

        color: red;

    }

</style>

<body>

<h3>我是标题</h3>

<ul>

    <li class="a b">1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

<input type="text" data-id="1">

<div class=" aa bb cc ">dasfasdasdsd</div>

<script>

    /*

     *

     *

     * */

    var lis = document.querySelectorAll('li')

    var ul = document.querySelector('ul');

    var h3 = document.querySelector('h3');

    var li = document.getElementsByClassName(' b a');

    console.log(li)

    console.log(h3);

    console.log(lis);

    /*元素遍历*/

    console.log(ul.childElementCount);//返回子元素个数

    console.log(ul.firstElementChild);//第一个子元素节点

    console.log(ul.lastElementChild);//最后一个子元素节点

    console.log(h3.previousElementSibling);//上一个元素节点

    console.log(h3.nextElementSibling);//下一个元素节点

    /*classList属性*/

    var div = document.getElementsByClassName('cc aa bb').item(0);

    console.log(div);

    var classNames = div.className;

    console.log(classNames)

    var arr = classNames.split(/\s+/)

    console.log(arr)

    console.log(arr.splice(2, 1));

    console.log(arr);

    //h5新添类名操作

    console.log(div.classList);

    div.classList.add(['dd', 'ee']); //添加类名参数可为数组

    div.classList.remove('aa');

    console.log(div.classList);

    div.onclick = function () {

        div.classList.toggle('aa')

    }

    /*焦点管理*/

    var inp = document.querySelector('input');

    inp.focus();

    console.log(document.activeElement);//页面获取焦点的元素

    console.log(document.hasFocus(inp));//检测某个元素是否获取焦点 判断用户是否点击

    /*自定义数据属性*/

    console.log(inp.dataset.id);

    /*插入标记*/

    div.innerHTML+='<script>alert(1)<\/script>';

    h3.outerHTML='<h1>222</h1>';

    console.log(li);

    console.log(ul.contains(li[0]));//ul是否包含li节点

</script>

</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .aa {
        color: red;
}
</style>
<body>
<h3>我是标题</h3>
<ul>
    <li class="a b">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<input type="text" data-id="1">
<div class=" aa bb cc ">dasfasdasdsd</div>
<script>

    /*
     *
     *
     * */
var lis = document.querySelectorAll('li')
    var ul = document.querySelector('ul');
var h3 = document.querySelector('h3');
var li = document.getElementsByClassName(' b a');
console.log(li)

    console.log(h3);
console.log(lis);

/*元素遍历*/
console.log(ul.childElementCount);//返回子元素个数
console.log(ul.firstElementChild);//第一个子元素节点
console.log(ul.lastElementChild);//最后一个子元素节点
console.log(h3.previousElementSibling);//上一个元素节点
console.log(h3.nextElementSibling);//下一个元素节点

/*classList属性*/
var div = document.getElementsByClassName('cc aa bb').item();
console.log(div);
var classNames = div.className;

console.log(classNames)
    var arr = classNames.split(/\s+/)
    console.log(arr)
    console.log(arr.splice(, ));
console.log(arr);
//h5新添类名操作
console.log(div.classList);
div.classList.add(['dd', 'ee']); //添加类名参数可为数组
div.classList.remove('aa');
console.log(div.classList);
div.onclick = function () {
        div.classList.toggle('aa')
    }

    /*焦点管理*/
var inp = document.querySelector('input');
inp.focus();
console.log(document.activeElement);//页面获取焦点的元素
console.log(document.hasFocus(inp));//检测某个元素是否获取焦点 判断用户是否点击

/*自定义数据属性*/
console.log(inp.dataset.id);

/*插入标记*/
div.innerHTML+='<script>alert(1)<\/script>';
h3.outerHTML='<h1>222</h1>';
console.log(li);
console.log(ul.contains(li[]));//ul是否包含li节点

</script>

</body>
</html>

第十一章：DOM扩展的更多相关文章

  1. JavaScript高级程序设计学习笔记第十一章--DOM扩展

    1.对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5 2.Selectors API Level 1 的核心是两个方法: querySelector()和 q ...

  2. 读书笔记 - js高级程序设计 - 第十一章 DOM扩展

      对DOM的两个主要的扩展 Selectors API HTML5  Element Traversal 元素遍历规范 querySelector var body = document.query ...

  3. python 教程 第二十一章、 扩展Python

    第二十一章. 扩展Python /* D:\Python27\Lib\Extest-1.0\Extest2.c */ #include <stdio.h> #include <std ...

  4. javascript权威指南第11章 DOM扩展

    //javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...

  5. javascript高级程序设计第3版——第1Java章 DOM扩展

    虽然DOM 为与XML 及HTML 文档交互制定了一系列核心API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提供了相同的实 ...

  6. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  7. 第10章DOM笔记

    第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a)  app ...

  8. JS复习：第十、十一章

    第十章 NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点,但它并不是Array实例,将其转化为数组的方法: function converToArray(nodes ...

  9. JavaScript DOM编程艺术-学习笔记（第十章、第十一章）

    第十章 1.动画中,因为js的效率高,所以看不见过渡效果 2.题外话:①国外人写书,总是先感谢一遍亲朋好友,最后感谢自己的家人. 3."除非允许用户'冻结'移动的内容,否则应该避免让内容在页 ...

  10. jQuery第十一章

    第十一章 一.jQuery性能优化 1.使用最新版本的jQuery类库. 2.使用合适的选择器 (1)$(“#id”) :使用id来定位DOM元素是最佳提高性能的方式. (2)$(“p”) :标签选择 ...

随机推荐

  1. Blender 工具使用——模式切换

    Blender 工具使用--模式切换 制作骨架时 在物件模式(Object Mode)下使用鼠标右键选中一个骨架,按Tab键,可以切换为编辑模式(Edit Mode),按Ctrl + Tab可以进入骨 ...

  2. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-009Polymorphic collections(@OneToMany(mappedBy = "user")、@ManyToOne、)

    一.代码 1. package org.jpwh.model.inheritance.associations.onetomany; import org.jpwh.model.Constants; ...

  3. NSWindow上添加NSView

    DBSCustomView *view = [[DBSCustomView alloc] initWithFrame:NSMakeRect(100, 100, 100, 100)]; [self.wi ...

  4. Luogu 2470 [SCOI2007]压缩

    和Luogu 4302 [SCOI2003]字符串折叠 差不多的想法,区间dp 为了计算方便,我们可以假设区间[l, r]的前面放了一个M,设$f_{i, j, 0/1}$表示区间$[i, j]$中是 ...

  5. java获取本机名称、IP、MAC地址和网卡名称

    java获取本机名称.IP.MAC地址和网卡名称 摘自:https://blog.csdn.net/Dai_Haijiao/article/details/80364370 2018年05月18日 1 ...

  6. opencv中读写视频

    1.介绍 OpenCV 读写视频之前,先介绍一下编解码器(codec) .如果是图像文件, 我们可以根据文件扩展名得知图像的格式.但是此经验并不能推广到视频文件中. 有些 OpenCV 用户会碰到奇怪 ...

  7. latex中的空格

    两个quad空格 a \qquad b 两个m的宽度 quad空格 a \quad b 一个m的宽度 大空格 a\ b 1/3m宽度 中等空格 a\;b 2/7m宽度 小空格 a\,b 1/6m宽度 ...

  8. MVC之htmlhelper总结

    自学习mvc以来,htmlhelper使用的也非常多,下面开始总结一下吧,由于本人比较懒,内容大部分摘自slark.net的笔记, 有人问为什么用这个htmlhelper,我就喜欢用原生的标签,这个按 ...

  9. .NET 一般处理程序使用Session

    .ashx中引用 session必须 using System.Web.SessionState ,继承IReadOnlySessionState/IRequiresSessionState IRea ...

  10. netty下载源码并导入idea

    netty源码导入eclipse会有一些兼容性问题,网上有解决方案,官方推荐idea,故此用idea. 拷贝git地址:https://github.com/netty/netty.git 使用git ...