第十章:DOM
<div class="wrap">
<ul id="ul">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
</div>
<script>
var ul = document.getElementById('ul');
var lis=document.querySelectorAll('li');
console.log(ul.nodeType);//1:元素节点 2:属性节点 3文本节点
console.log(ul.nodeName);//元素标签名
console.log(ul.nodeValue);//始终为null
console.log(lis);
console.log(Object.getOwnPropertyDescriptor(window,'lis'));
console.log(lis.item(0));
console.log(lis.constructor); //查看构造函数
console.log(Array.from(lis))//转化为数组 </script>
<div class="wrap">
<ul id="ul">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
</div>
<script>
var ul=document.querySelector('ul');
var li=document.querySelector('li');
var lis=document.querySelectorAll('li'); /*节点之间关系*/
console.log(ul.firstChild);//子集节点
console.log(ul.firstElementChild);//子集第一个元素节点
console.log(ul.lastElementChild);//子集最后一个元素节点 console.log(li.parentNode);//直接父元素
console.log('下一个兄弟元素节点',li.nextElementSibling);//下一个兄弟元素节点
console.log('上一个兄弟元素节点',li.previousElementSibling);//上一个兄弟元素节点
console.log(ul.childNodes);//ie9+ ie8会有文本节点 /*\
* 父.appendChild(子) 父级元素内部最下面添加子元素
* 父.insertBefore(要插入的元素,子元素)
* 父.replaceChild(新元素,被替换掉的子元素);//
*
* */
var myli=document.createElement('li');
var p=document.createElement('p')
p.innerHTML='dasda';
myli.setAttribute('name','li');
myli.innerText=33; myli1=myli;//如果不赋值 下面两句会操作同一个节点
ul.appendChild(myli);
ul.insertBefore(myli,li);
ul.replaceChild(p,li);// /*节点复制*/
var clone=ul.cloneNode(); //克隆其自身不包含子元素
var clone1=ul.cloneNode(true);//深复制 会克隆他的子元素
console.log(clone);
console.log(clone1);
<div class="wrap">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
<script>
/*
* js中通过Document类型表示文档
* 在浏览器中document对象是HTMLDocument的一个实例 表示整个页面
* document 是window对象的一个属性
*
*
* */ console.log(document.constructor) //ƒ HTMLDocument() { [native code] } console.log(window.document);
console.log(window.document.nodeName);
console.log(window.document.nodeValue);
console.log(window.document.nodeType);
/*下面两个输出一致指向html*/
console.log(document.childNodes[1]);//
console.log(document.documentElement);
console.log(document.body);
console.log(document.doctype);//各浏览器支持程度不一样
console.log(document.doctype === document.childNodes[0]);//true
console.log(document.title);//文档标题 可赋值
console.log(document.URL);//
console.log(document.domain);//域名
console.log(document.URL === location.href);//true /*查找元素*/
var nodes = document.getElementsByTagName('*');
console.log(nodes)
/*
setAttribute()
getAttribute()
removeAttribute()
* */
var li=document.querySelector('li');
li.setAttribute('name','hxq');
li.setAttribute('www','hxq');
console.log(li.getAttribute('name'));
li.removeAttribute('name')
第十章:DOM的更多相关文章
- 第十章 DOM
10.1节点层次 html元素通过元素节点表示,特性节点通过特性节点表示,文档类型节点通过文档类型节点访问,这些类型都继承一个基类型. 10.1.1 Node类型 JavaScript中的所有节点类型 ...
- JavaScript高级程序设计学习笔记第十章--DOM
1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...
- JAVASCRIPT高程笔记-------第十章 DOM对象
10.1.1 node类型 --除IE外 所有浏览器都可以访问到这个类型 :JS中所有的节点类型都继承自Node类型 nodeName 与nodeValue 如果是一个元素 那么nodeName中保 ...
- 第十章—DOM(0)—NODE类型
DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素, ...
- 第十章—DOM(一)——Document类型
DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...
- 读书笔记 - js高级程序设计 - 第十章 DOM
文档元素 是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素 在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node ...
- 第十章—DOM(三)——Text类型
文本节点由TEXT类型表示,包含纯文本内容,Text节点具有以下特征: 看看下面的代码: div元素开始和结束标签只要存在内容,就会创建一个文本节点.可以使用以下代码来访问元素的这些文本子节点: 访问 ...
- 第十章—DOM(二)——Element类型
Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...
- 第10章DOM笔记
第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a) app ...
- js-JavaScript高级程序设计学习笔记6
第八章 BOM 1.BOM的核心对象是window,他表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JS访问浏览器窗口的一个接口,又是ES规定的Global对象. 2.定义全 ...
随机推荐
- JDBC03 利用JDBC实现事务提交与回滚【调用Connection中的方法实现事务管理】
目录 1 Connection中的重用方法 2 JDBC事务管理经典案例 1 Connection类中常用的方法回顾 1.1 Statement createStatement() throws SQ ...
- linq 初步认识
linq to sql 类 介绍: linq如果不能用的话 重装一下vs就好了 LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言 ...
- JS对表单的操作
JS对表单中的style的操作,包括复选框技术 废话不多说直接上文件代码!!! 功能:全选\反选,鼠标监测变颜色 <html> <head> <meta charset= ...
- 面试题:AOP面向切面编程
//创建一个与代理对象相关联的InvocationHandler InvocationHandler stuHandler = new MyInvocationHandler<Person> ...
- ZXing开发详解
博客转载自:https://blog.csdn.net/skillcollege/article/details/38852183 什么是Z*? 在Android平台做过二维码相关模块的肯定都熟知ZX ...
- 简单好用的General开发框架
1.开篇概述 从2004年学习编程,2007年学习C#以来,做的多半都是跟数据库打交道的工作,所以也积累了很多数据库方面的知识,用过一些ORM框架,从了解掌握到自己实现,慢慢积累了很多代码,直到201 ...
- ZROI2018提高day6t1
传送门 分析 我们发现这个四元组可以分解成一个逆序对拼上一个顺序对,这个线段树搞搞然后乘一下就可以求出来了,但是我们发现可能有(a,b)为逆序对且(b,c)为顺序对的情况,所以要进行容斥,我们只需要枚 ...
- HTML5游戏开发 PDF扫描版
很多从事Web前端开发的人对HTML总有些不满,比如需要手动检查和设计很多格式代码,不仅容易出错,而且存在大量重复.好在HTML5让我们看到了曙光.作为下一代Web开发标准,HTML5成为主流的日子已 ...
- javascript 文本框值变化触发事件
javascript 文本框值变化触发事件jo.find(".price").bind('input onpropertychange', function () { me.cal ...
- epoll简介
1.epoll简介 epoll是I/O事件通知工具,与select/poll相比,epoll最大的好处在于它不会随着监听fd数目的增长而效率降低.epoll API既可以用作edge触发的接口,也可以 ...