JS DOM篇(一)

news/2024/7/24 12:11:10 标签: js, javascript, dom, 前端, html5

Node类型

DOM1级定义了一个Node接口,节点类型定义了12个常数值常量来表示(用nodeType区分)
开发人员最常用的就是元素节点和文本节点

  1. nodeName 和 nodeValue属性
js">if(someNode.nodeType == 1){
	value = someNode.nodeName  //nodeName是元素的标签名
}
  1. 节点关系 childNodes parentNode
    每个节点都有childNodes属性,保存着一个NodeList对象(是个伪数组)
js">var firstChild = someNode.childNodes[0]
var secondChild = someNode.childNodes.items(1) //可以通过items()方法获取
var count = someNode.childNodes.length  

var firstChild = someNode.firstChild  //快速找到第一个
var lastChild = someNode.lastChild  //快速找到最后一个
console.log(firstChild == secondChild.previousSibling)
console.log(secondChild == firstChild.nextSibling)

关系图如下
假装有图

  1. 操作节点
js">//appendChild()
someNode.appendChild(newNode)
//insertBefore(newNode,xxxNode)
someNode.insertBefore(newNode,xxxNode)
//removeChild()
someNode.removeChild(xxxNode)
//replaceChild()
someNode.replaceChild(newNode,oldNode)

Document 类型

  1. 文档信息
属性说明
document.domain取得域名
document.URL取得完整URL(可设置)
document.referrer取得来源页面的URL
  1. 查找元素
js">document.getElementById()  //根据id
document.getElementByTagName() //根据标签名
document.getElementByName() //根据属性名
document.images //页面所有image
document.forms //页面所有form
document.anchors //页面所有带name特性的a标签

Element 类型

  1. 标签汇总(省略,在html中总结)
  2. 操作属性方法
js">nodeName || tagName  //访问元素的标签名
getAttribute(attrName)  //获取属性
setAttribute(atrtName,attrVal) //设置属性
  1. 创建元素
js">var odiv = document.createElement('div')
odiv.id = 'myDiv'
odiv.className = 'box'
document.body.appendChild(odiv)
  1. 获取子元素
js">var oDiv = document.getElementById('myDiv')
for(let i=0,len = oDiv.childNodes.length;i<len;i++){
	if(oDiv.childNodes[i].nodeType == 1){
		//执行操作
	}
}

http://www.niftyadmin.cn/n/1852490.html

相关文章

Game Creators: Threading for Games (英文)

获取视频链接:[url]http://softwarevideos-zho.intel.com/index.php?category_id4&vid_id70&langZH-CN[/url]下载该视频访问英特尔 移动软件开发社区Lee Bamber, CEO of Game Creators, talks about the performance gains they made through threading their game ar…

Oracle表字段的增加、删除、修改和重命名

本文主要是关于Oracle数据库表中字段的增加、删除、修改和重命名的操作。 增加字段语法&#xff1a;alter table tablename add (column datatype [default value][null/not null],….); 说明&#xff1a;alter table 表名 add (字段名 字段类型 默认值 是否为空); 例&#xff…

JS DOM篇(二)Element 类型

Element 类型 标签汇总&#xff08;省略,在html中总结&#xff09;操作属性方法 nodeName || tagName //访问元素的标签名 getAttribute(attrName) //获取属性 setAttribute(atrtName,attrVal) //设置属性创建元素 var odiv document.createElement(div) odiv.id myDiv …

Windows内存管理机密+揭穿内存优化工具的骗局

原文&#xff1a;The Memory-Optimization Hoax:RAM optimizers make false promises 作者&#xff1a;Mark Russinovich 译者&#xff1a;盆盆我们在浏览网页时&#xff0c;也许会经常看到一些弹出广告&#xff0c;例如“整理内存碎片、提升系统性能”、或者“大大减少系统和程…

go系列(3)- go框架beego以及redis的使用

这篇讲讲如何在beego框架使用redis。 golang中比较好用的第三方开源redisclient有&#xff1a; go-redis 源码地址&#xff1a;https://github.com/go-redis/redis文档地址&#xff1a;http://godoc.org/github.com/go-redis/redisredigo 源码地址&#xff1a;https://github.c…

(一) 多窗口打开单页面实现同步拖拽

step1 实现拖拽 css <style>*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;background-color: #ae7000;cursor: pointer;text-align: center;line-height: 200px;position:absolute;} </style>html <body><div class"box">dr…

DbEntry.net的默认主键

DbEntry.net的默认主键是bigint型的&#xff0c;而非int型&#xff0c;如果数据库中为int型,就会出现异常

解决浏览器保存密码自动填充问题

解决浏览器保存密码自动填充问题 问题描述 话说有一天&#xff0c;我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码&#xff0c;懒惰如我点击了记住密码。一切都很正常的进行着&#xff0c;没有什么异常发生。然而&…