1.dom之对象分类

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象分类</title> </head>
<body>
<div id="div1">
<div ></div>
<p></p>
</div>
<script type="text/javascript"> /*在DOM(文档对象模型中,也是一切都是对象,但是范围很小,就只有几个
1.document object
2.element object
3.text object
4.attribute object
5.comment object
5个对象封装到一个Node object中。node object有
自己的节点属性:
attribute;nodeType;nodeName;nodeValue;innerHTML;
导航属性:
parentNode
firstChild
lastChild
childNodes
由于上面的5个属性都是封装到一个Node Object中,所以我们可以直接使用这些属性。/
*/
var ele=document.getElementById("div1");
//自身属性
console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.nodeValue);
//导航属性之firstChild
var ele2=ele.firstChild;
alert(ele2.nodeName);//#text 结果令人惊讶,原来2个div之间有一些空格,这些就是造成是文本的原因 var ele3=ele.childNodes;
alert(ele3.length);//5,js把空白区域当成了文本
var parent=ele.parentNode;
alert(parent);
</script>
</body>
</html>

2.dom对象模型的根据文档树结构进行导航。

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象分类</title> </head>
<body>
<div id="div1">
<div ></div>
<p></p>
</div>
<script type="text/javascript"> /*在DOM(文档对象模型中,也是一切都是对象,但是范围很小,就只有几个
1.document object
2.element object
3.text object
4.attribute object
5.comment object
5个对象封装到一个Node object中。node object有
自己的节点属性:
attribute;nodeType;nodeName;nodeValue;innerHTML;
导航属性:
parentNode
firstChild
lastChild
childNodes
由于上面的5个属性都是封装到一个Node Object中,所以我们可以直接使用这些属性。/
*/
var ele=document.getElementById("div1");
/* //自身属性
console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.nodeValue);
//导航属性之firstChild
var ele2=ele.firstChild;
alert(ele2.nodeName);//#text 结果令人惊讶,原来2个div之间有一些空格,这些就是造成是文本的原因 var ele3=ele.childNodes;
alert(ele3.length);//5,js把空白区域当成了文本
var parent=ele.parentNode;
alert(parent);*/
//既然firstChild不行,但是firstElementChild可以
var ele_son=ele.firstElementChild;
alert(ele_son.nodeName);
//lastElementChild
var last=ele.lastElementChild;
alert(last.nodeName);
//所有节点children
var ele_nodes=ele.children;
alert(ele_nodes.length);
alert(ele_nodes[0].nodeName); for(var i=0;i<ele_nodes.length;i++){
console.log(ele_nodes[i].nodeName);
}
//nextElementSibling,兄弟元素节点,记住没有空白文档 var sib=ele.firstElementChild;
console.log(sib.nextElementSibling.nodeName);
</script>
</body>
</html>

3.全局查找和局部查找

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找</title>
</head>
<body>
<div id="div1">hello
<div class="div2">hello2</div>
<div class="div3" name="lizebo">hello3
<p>hello inner</p>
<p id="p1">world innerhtml</p>
</div>
<p>hello,browser</p>
</div>
<script type="text/javascript">
//这里注意一下啊,这里为什么是elements,而不是element。这是有意义的,因为
//设计者知道以class命名元素可能有多个,而id只能有一个。
//1.通过id 选择器:document.getElementById();
//2.通过class选择器
var ele=document.getElementsByClassName("div2");
console.log(ele[0].nodeName);
console.log(ele[0].innerHTML);
//3通过tag
var tagnames=document.getElementsByTagName("p");
console.log(tagnames);
console.log(tagnames[0].innerHTML);
//4.通过名字,虽然用的不多,但是可以用这个
var names=document.getElementsByName("lizebo");
console.log(names[0].nodeName); /*局部去找也就是不通过document找,那么只有用element了,都差不多,这个怎么方便怎么用。*/
var els=document.getElementsByClassName("div3")[0];
var jubu=els.getElementsByTagName("p");
console.log(jubu[0].innerHTML); </script>
</body>
</html>

Dom模型的更多相关文章

  1. DOM模型有三种

    <!-- DOM模型有三种: DOM level 1:将HTML文档封装成对象. DOM level 2:在level 1基础加入新功能,比如解析名称空间. //<html xmlns=& ...

  2. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  3. JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...

  4. JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

    这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...

  5. Fireworks Extension —— 开发篇(Dom模型)

    如上一篇博文所叙述的,一个很偶然的机会,我得知可以使用Javascript开发Fireworks插件,又注意到了视觉小伙伴的需求,于是便上手开发Fireworks Extension了. 很幸运的,在 ...

  6. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  7. 总结一下自己脑海里的JavaScript吧(一)--DOM模型

    今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识! 这儿就第一章: 说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运 ...

  8. 肆、js的DOM模型

    一.网页中的dom模型框架 1.dom中的3中节点:元素节点.文本节点.属性节点 a.元素节点:html中的各种标签就是各个元素节点,元素节点可以包含其他元素,只有html根节点例外. b.文本节点: ...

  9. 浏览器内核之 HTML 解释器和 DOM 模型

    微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题. 前言 此文章是我最近在看的[WebKit 技术内幕]一书的一些理解和做的笔记.而[WebKit 技术内幕]是基 ...

  10. JavaScript的事件、DOM模型、事件流模型以及内置对象详解(三)

    JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...

随机推荐

  1. WordCount项目

    采用的源码来自http://blog.csdn.net/lnz001/article/details/54851551 经修改后,已上传至GitHub.https://github.com/FengX ...

  2. Spring 3 AOP 概念及完整示例

    AOP概念 AOP(Aspect Oriented Programming),即面向切面编程(也叫面向方面编程,面向方法编程).其主要作用是,在不修改源代码的情况下给某个或者一组操作添加额外的功能.像 ...

  3. CountDownLatch、CyclicBarrier和 Semaphore比较

    1)CountDownLatch和CyclicBarrier都能够实现线程之间的等待,只不过它们侧重点不同: CountDownLatch一般用于某个线程A等待若干个其他线程执行完任务之后,它才执行: ...

  4. Kotlin——最详细的接口使用、介绍

    在Kotlin中,接口(Interface)的使用和Java中的使用方式是有很大的区别.不管是接口中的属性定义,方法等.但是定义方式还是相同的. 目录 一.接口的声明 1.接口的声明 关键字:inte ...

  5. 微信小程序支付

    @Controllerpublic class UserPayToMerchantController { public static final String appid="******* ...

  6. angular高级篇之transclude使用详解

    angular指令的transclude属性是一个让初学者比较难以理解的地方,transclude可以设置为false(默认),true或者对象三种值,如果不设该属性就默认为false,也就是说你不需 ...

  7. TIDB技术文档翻译

    http://blog.csdn.net/antony9118/article/details/60470115

  8. 英语学习笔记---01---新概念第一册---Lesson 1 Excuse me!

    Lesson 1   Excuse me!   [词汇] excuse [iks5kju:z]                      v. 原谅      劳驾.借光 me             ...

  9. touch pointer

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  10. 用代理IP进行简单的爬虫——爬高匿代理网站

    用西刺代理网站的IP爬高匿代理网站 import re import _thread from time import sleep,ctime from urllib.request import u ...