首页 技术 正文
技术 2022年11月12日
0 收藏 512 点赞 3,085 浏览 2917 个字

第一部分 dom

node类型

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有:

元素类型

NodeType

元素

1

属性

2

文本

3

注释

8

文档

9

if  (someNode.nodeType == 1)  { //适用于所有浏览器

}

nodeName 属性

nodeName 属性规定节点的名称。

– nodeName 是只读的

– 元素节点的 nodeName 与标签名相同

– 属性节点的 nodeName 与属性名相同

– 文本节点的 nodeName 始终是 #text

– 文档节点的 nodeName 始终是 #document

注释:nodeName 始终包含 HTML 元素的大写字母标签名。

if  (someNode.nodeType == 1)  {

value = someNode.nodeName   //nodeName的值是元素的标签名

}

nodeValue 属性

nodeValue 属性规定节点的值。

– 元素节点的 nodeValue 是 undefined 或 null

– 文本节点的 nodeValue 是文本本身

– 属性节点的 nodeValue 是属性值

每个节点都有一个childNodes属性,其中保存着一个NodeList对象。(NodeList是一个类数组对象,不是Array的实例)

someNode.firstChild =someNode.childNodes[0] = someNode.childNodes.item(0)

someNode.lastChild = someNode.childNodes[someNode.childNodes.length-1]

hasChildNodes() //检测有没有子节点

var returnNode = someNode.appendChild(someNode.firstChild) //在第一个子节点后append

insertBefore(newNode, null) //和append()方法一致

insertBefore(newNode, someNode.firstChild) //在特定位置添加节点

replaceChild(newNode, someNode.firstChild) //替换节点

removeChild(someNode.firstChild)  //移除节点

replaceChild(newNode, someNode.childNodes[someNode.length-2])  //删除倒数第二个元素

cloneNode()  //接收一个参数,true(为深复制,复制节点以及子节点树),false(只复制节点本身)

<ul>

<li>item1</li>

<li>item2</li>

<li>item3</li>

</ul>

var deepList =mylist.cloneNode(true)

console.log(deepList.childNodes.length)   //3(ie<9) 或7(其他浏览器)

[text, li, text, li, text, li, text]

console.log(deepList.children.length)  //3

[li, li, li]

console.log(deepList.childNodes.length) //

var shallowList =mylist.cloneNode(false)

console.log(shallowList .childNodes.length)   //0

IE9之前的版本不会为空白符创建节点,cloneNode()方法不会复制dom节点的javascript属性,例如事件处理,但ie有bug,建议复制前移除事件

Document类型

var allElements = document.getElementByTagName(“*”) //所有元素

document.forms document.images

document.links   //带有href特性的<a>元素

Element类型

1.HTML元素

var div= document.getElementById(“myDiv”)

console.log(div.id)

console.log(div.className)

console.log(div.title)

console.log(div.dir)

2.取得特性

getAttribute()  setAttribute()  removeAttribute()

<div id=”myDiv” align=”left” my_special_attribute=”hello!”

console.log(div.my_special_attribute) //undefined (ie除外)

div.mycolor = “red”

console.log(div.getAttribute(“mycolor”)) //null (ie除外)

DOM扩展

选择符

querySelector() querySelectorAll()   //ie8+

matchesSelector() //接受参数,css选择符,如果调用元素与该选择符匹配,返回true,否则,返回false   p288页

与类相关的扩充

getElementsByClassName() //ie9+ 在document对象上调用始终会返回与类匹配的所有元素,在元素上调用改方法只会返回后代元素中匹配的元素

//删除”disabled”类

div.classList.remove(“disabled”)

//添加”current”类

div.classList.add(“current”)

//切换”user”类

div.classList.toggle(“current”)

//确定元素中是否包含既定类名

if (div.classList.contains(“bd”))

Firefox 3.6+和Chrome

location修改URL的方法

初始url为http://www.baidu.com/wechart/

将url修改为 http://www.baidu.com/#section1

location.hash = “#section1”;

将url修改为 http://www.baidu.com/wechart/?q=javascript

location.search= “?q=javascript”;

将url修改为 http://www.yahoo.com/wechart/

location.hostname= “www.yahoo.com”;

将url修改为 http://www.yahoo.com/mydir/

location.pathname= “mydir”;

将url修改为 http://www.yahoo.com:8080//wechart

location.port = 8080;

上一篇: (转)SQL 优化原则
下一篇: GacUI学习(一)
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,497
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,910
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,744
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,498
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,136
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,300