第十一章:DOM扩展
<!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扩展的更多相关文章
- JavaScript高级程序设计学习笔记第十一章--DOM扩展
1.对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5 2.Selectors API Level 1 的核心是两个方法: querySelector()和 q ...
- 读书笔记 - js高级程序设计 - 第十一章 DOM扩展
对DOM的两个主要的扩展 Selectors API HTML5 Element Traversal 元素遍历规范 querySelector var body = document.query ...
- python 教程 第二十一章、 扩展Python
第二十一章. 扩展Python /* D:\Python27\Lib\Extest-1.0\Extest2.c */ #include <stdio.h> #include <std ...
- javascript权威指南第11章 DOM扩展
//javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...
- javascript高级程序设计第3版——第1Java章 DOM扩展
虽然DOM 为与XML 及HTML 文档交互制定了一系列核心API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提供了相同的实 ...
- dom扩展
第十一章 DOM扩展 一.选择符API 1.querySelector()方法 接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...
- 第10章DOM笔记
第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a) app ...
- JS复习:第十、十一章
第十章 NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点,但它并不是Array实例,将其转化为数组的方法: function converToArray(nodes ...
- JavaScript DOM编程艺术-学习笔记(第十章、第十一章)
第十章 1.动画中,因为js的效率高,所以看不见过渡效果 2.题外话:①国外人写书,总是先感谢一遍亲朋好友,最后感谢自己的家人. 3."除非允许用户'冻结'移动的内容,否则应该避免让内容在页 ...
- jQuery第十一章
第十一章 一.jQuery性能优化 1.使用最新版本的jQuery类库. 2.使用合适的选择器 (1)$(“#id”) :使用id来定位DOM元素是最佳提高性能的方式. (2)$(“p”) :标签选择 ...
随机推荐
- keystone组件
引: 什么是keystone 为何要有keystone keystone的功能 keystone概念详解 keystone与openstack其他组件关系 k ...
- AbstractFactoryPattern(23种设计模式之一)
设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...
- JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-007Inheritance of embeddable classes(@MappedSuperclass、@Embeddable、@AttributeOverrides、、)
一.结构 二.代码 1. package org.jpwh.model.inheritance.embeddable; import javax.persistence.MappedSuperclas ...
- hive与hbase数据类型对应关系
hive与hbase数据类型对应关系 当hbase中double,int 类型以byte方式存储时,用字符串取出来必然是乱码. 在hivd与hbase整合时也遇到这个问题:做法是:#b 1.加#b C ...
- 前端基础 之 BOM和DOM
浏览目录 背景 BOM window对象 window的子对象 DOM HTML DOM树 查找标签 节点操作 事件 一.背景 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些 ...
- 格式化字符串攻击原理及示例.RP
格式化字符串攻击原理及示例 一.类printf函数簇实现原理 类printf函数的最大的特点就是,在函数定义的时候无法知道函数实参的数目和类型. 对于这种情况,可以使用省略号指定参数表. 带有省略号的 ...
- C++11新标准:constexpr关键字
一.constexpr意义 将变量声明为constexpr类型以便由编译器来验证变量是否是一个常量表达式(不会改变,在编译过程中就能得到计算结果的表达式).是一种比const更强的约束,这样可以得到更 ...
- 处理器适配器(handlerAdapter)执行源码分析(涉及到适配器模式)(九)
适配器:实现很多接口统一管理. DispatcherServlet 组建的默认配置 HttpRequestHandlerAdapter,SimpleControllerHandlerAdapter,A ...
- jQuery 插件开发——GridData(表格)第二版
开发背景 表格插件之前我也写个一篇,当时写那个插件的时候,我自己还没有总结出写插件的方法,虽然功能实现了,但是使用起来还是有点别扭的,并且需要在调用写添加特定名称的方法,这个地方着实违背了开发插件的易 ...
- Sqlserver根据条件去除重复数据并且留下的是最大值数据
项目中需要根据条件获取一些数据,但是如果条件相同的情况下,要去掉条件一样的并且某个值是最小的数据,留下的是最大值数据. 简单记录一下sql: --去重保留最大值那条 --Year和MCode一样的前提 ...