javascript的操作DOM的属性
DOM
JavaScript分三个部分
ECMAScript标准: JS 的基本语法
DOM: Document Object Model ---> 文档对象模型-----操作页面的元素
BOM: Browser object Model...--.浏览器对象模型-- 操作的是浏览器
DOM: 文档对象模型
*文档:把- -个htmL文件看成是- -个文档,由于万物皆对象,所以把这个文档看成是一个对象
* XML文件也可以看成是一个文档
*HTML:展显示信息,数据
*XML:重点在于存储
htmL文件看成是一 个文档,那么这个文档看成是一个对象,文档中的所有的标签都可以看成是一个对象
*页面中的每个标签,都是一个元素(element), 每个元素都可以看成是一个对象*标签可以嵌套,标签中有标签,元素中有元素
* htmL页面中都有一个 根标签-html--也叫根元素
*页面中的有一一个根元素(标签- -htmL),里面有很多的元素(有很多的标签,有很多的对象)
*元素:页面中的所有的标签都是元素,元素可以看成是对象
*节点:页面中所有的内容都是节点:标签,属性,文本
Dom分类
核心DOM :是提供了操作HTML和XML文档的各种属性,定义了 一些公共的属性和方法。
XML DOM :针对XML操作的接口,也是一些属性和方法。
HTML DOM :针对HTML文档操作的接口,也是一些属性和方法。
Event DOM :事件对象模型,提供了 一些常用的事件。比如: onclick、 onload、 onchange
CSS DOM :让]S去操作和访问CSS的各种属性。
Document对象:
title属性
操作当前文档的标题
function getTitleO{
alert(document. title);
}
function setTitleO{
document.title = "设置标题";
}
URL属性
返回当前文档的URL。
function geturl(){
alert(document. URL);
}
Write()方法 向文档写文本。HTML表达式或者javascript代码
Document.write(“维生素”);
- DOM操作之节点操作
整个文档是一个文档节点(Document)
每个HTML标签是一个元素节点(Element)
1 document.write("我是一个兵<br/>");
三、DOM操作之节点操作
整个文档是一个文档节点(Document)
每个HTML标签是一个元素 节点(Element)
性。每一个HTML属性是一个属性节点Atribute是 指元素中所有的属性构成的节点列表,个标记有多个属
包含在HTML元素中的文本是文本节点(Text)是最底层的节点,它下面不能再有其它子节点。
一个HTML文档,只有一个根元素,就是<htm1>标记
父节点(parentNode):当前节点的上一级元素;
子节点(childNode):当前节点的下一-级元素:
兄弟节点:相邻的两个节点,同属于一个父节点。
如: <htm1>
<head>
<title>文档标题</title>
</head>
<body>
<h1>我的标题</h1>
1
a href-"http: //www. baidu. com">我的链接</a>
12
</body>
13
</html>
1、获取节点(dom对象的方法和属性)
获取节点(js方式获取DOM节点)获取html中的标签元素
10
<h1>我的标题</h1>
1
a href-="http://www. baidu . com"我的链接</a
12
</body>
1
</html>
1、获取节点(dom对象的方法和属性)
获取节点(is方式获取DOM节点)获取htmI中的标签元素定位到html元素
document.getElementByld);
返回单个DOM元素节点
document.getElementsByName();
返回多个元素根据name属性值
document.getElementsByTagName0;
返回多个元素根据标签名
document.querySelectorAll();
返回多个元素根据选择器(可以是基本选择器,还可以是其它选
择器)
注意:后面三个是返回节点数组,注意使用方法
<div id="box">he1lo NodeType !~</div>
2
<u1 id="nav">
3
first list
<1i id="testli" name="listlist">列表01</1i>
5
<1i id=" testlist">列表02</1i>
<1i>列表03</li>
<1i>列表04</1i>
best list
</u1>
//元素节点
var element1=document. getElementById("box");alert(element1);
var element2=document. querySelectorAll("#box")[0];alert(element2);
设置或获取节点的属性值
dom元素属性(只能是标准属性设置或获取标签的文本内容
dom元素.innerText
设置或获取标签的文本内容(识别标签)
dom元素.innerHTML
案例一:设置、查看src属性
1<img src=" img/logo.png" id="img"/>
2 <button οnclick="getAttr();">查看 属性</button>
function getAttr(){
var img=document.getE1ementById(" img");
alert(img.src);
alert(img.id);
}
//修改src属性
img.src="img/mai.png";
<button onclick-"setAttr()设置属性</button>
function setAttr(){
//元素节点
var element1=document . getElementById("img");
element1.src = " ../img/mai. jpg"
ต案例-: innerText innerHtml方式区别· ป
function setIText(){
var tag ="<p>郭德纲的 </p>";
var objNode = document. getElementById("nav");
objNode. innerText=tag;
}
function setIHtm1(){
var tag = <p>口袋空空 </p> ;
var objNode = document . getE lementById("nav");
objNode. innerHTML = tag;
}
10
综合练习:全选
<input type-"'checkbox" name="all"
oncick=checkAll(this)"/>全选 <br>
<input type=" checkbox" name="child" οnclick="checkChi1d()"/>子
<br />
<input type-"checkbox" name="child" οnclick="checkChild()"/>子<br />
<input type="checkbox" name="chi1d" οnclick="checkChild()"/>子<br />
<input type="checkbox" name=" child" onclick"checkChild0"/>子<br />
function checkA11(){
或者父复选框的选中 true//false
f1ag true选中 false 未选中
var. flag=document.getE1ementsByName("al1")[0]. checked;
//获取所有的子复选框
var chi 1dNode=document. getE ementsByName("child");for(var i=0; i<chi 1dNode. length;i++){
chi dNode[i]. checked=f1ag:
}
}
//子复选框去计算父复选框是否被选中思考
function checkchild(){
//获取子复选框的个数
var childNode=document . getE lementsByName("child");
var len=chi ldNode. length;
//判断子复选框选中的个数
var count=0;
for(var i=0;i<chi ldNode. length;i++){
//子复选框被选中
if(childNode[i]. checked=-true){
count++;
}
}
//if(子复选框全选中){父复选框选中}else{不选中}
//或父复选框的节点
var allNode=document. getE lementsByName("a11")[0];
if(len= count){
allNode. checked=true;
}else{
allNode. checked=false;
2、获取节点的信息
nodeName :节点名字
nodeValue :节点值
nodeType :节点类型
element元素//上面有四种取元素节 点的方法
attr/1 //getAttributeNode()5iz3xEr t5 5XE
text文本// #text表示名字
comments注释
document文档
<a href="#" id=“a1”
class="a2" style="color:red;">
a标签
</a>
上例属性有(属性= "属性值")如: href id class style
<div id="box”>he1lo NodeType!~</div>
<u1 id="nav">
first list
<1i id="test1i"name="listlist">列表01</1i><1i id="testlist">列表02</li>
<1i>列表03</li>
<1i>列表04</1i>
best list
</u1>
//元素节点
var element1=document. getE lementById("box");
var element2=document. queryselec torAllC "#box")[0];document. wri te(e lement1. nodeName+"名<br/>");
document . write(element2. nodeName+"名<br/>");
document . write(e lement1. nodevalue+"值<br/>");//值为nu11document . write(e lement2. nodeValue+"值<br/>' );
document. wri te(e lement1. nodeType+"类型<br/>"D;//1元素节点document . write(element2. nodeType+"类型<br/>");//1元素节点
注意: getAttributeNode0方法用来得到属性节点对象,而节点属性方式是操作(设置与查看)属性直
//获取属性节点方法getAttributeNodeO
var attr1=document . getElementById("nav"). getAttributeNode("id");var attr2=document. getElementById("nav"). id;
//用节点属性只能访问与设置属性值只能操作属性不是返回节点对象,因为他不是一个对象所以没有节点对象的方法和属性
document . write("节点名字: "+attr1. nodeName+"<br />");document.write("节点名字: "+attr2. nodeName+"<br />");document.write("节点值: "+attr1. nodeValue+"<br />");
document . write("节点值: "+attr2 . nodeValue+"<br />");
document. write("节点类型: "+attr1. nodeType+"<br />");
document . write("节点类型: "+attr2. nodefype+"<br />");
var textNode= document. getE lementById("nav"), lastChiId;
document,write("节点名字"+textNode, nodeHame+"br />");
document,write("节 点值"+textNode,nodeValue+"dbr />");
document,write("节点类型"+textNode,nodeType);
3、文档节层次操作
父节点
上一个最次的节点parentNode 得到父结点对象 (标签)
子节点
注意:元素节点间的空格和回车
所有子节点
childNodes返回的是 子节点集台,使用子节点时注意数组chlldNodes[]
第一个子节点
fIrstChild
返回节点的第一个子节点通常用这方法访问该元素的文本节点
最后一个子节点lastChld
返回节点的最后一个 子节点通常用这方法访问该元素的文本
节点
兄弟节点
nextSibling
下一个节点(含文本节点)
nextElementSlbling 下一个元素节点
previousSibling上 个节点 (含文本节点)prevlousElementSlbllng上一 个元素节点
- 操作节点
- 操作节点属性
//前面介绍方法元素属性名 操作 元素的属性
setAtribute("属性名","属性值")
给一个节点增加/修改属性值
getAttribute("属性名");
获取一个属性的值
removeAttribute("属性名");
删除节点的属性
举例: <img /> img. setAttribute("src" ,"images/bg.gif")
案例:
<img src="img/dog. jpg" id=" imageid"/>
<button οnclick="getAttr()">查看属性 </button><button οnclick="setAttr()">设置属性 </button><button οnclick="delAttr()">删除属性</button>
function getAttr(){
alert("getAttributeO方式: "+node. getAttr ibute("'src"));alert("元素节点属性方式: "+node.src);
function setAttr(){
var node = document. getE lementById("imageid");
//node. src="img/mai. jpg";//属性方式
node. setAttribute("src" ,"img/mai. jpg") //getAttribute()方式
}function delAttr(){
var node = document. getE ementßyId("imageid");
node.src="";//给空值,
node. removeAttribute("src");B.节点的值
元素的节点可以用InnerHtml属性向html标签中添加一个标签document.createElement("");
<div id="box">he1lo NodeType !~</div>
<u1 id="nav">
first list
<1i id="testli" name="listlist">01</1i><1i id=" testlist">02</1i>
<1i>03</1i>
<1i>04</1i>
best list
</u1>
function addNode(){
var objNode = document. createl lement("img");
objNode.src="img/dog.jpg"://两种操作属性的方式objNode .setattr ibute("src","img/mai, jpg");var pnode = document.getE lementbyId("nav");pnode, appendch11d(ob jNode);
C、 创建文本节点
document.create TextNode("这贯我新加的内容");注意;这里只能是纯文本
<button onclck"addTextNode()">创建文本节点</button>
function addTextNode(){
var textNode=document. createTextNode(“是我新加的内容");var pnode=document . getElementiyId("nav");
pnode .appendChild(textNode);
D、迫加节点
在目标节点的后增加
appendChild(node):将一个节点追加到某个父 节点中子节点的最后位置。如: A.appendChlld(B); //在A节 点的末尾追加子节点B
E、插入节点
插入新节点,要确定在父节点中增加的位置,位于哪个子节点之前。pnode.insertBefore(newNode,currNode);
pnode:目标父节点pnode:目标父节点pnode:目标父节点currNode :哪个子节点之前
如:A.insertBefore(B,C);/l在A节点下加入新节点B插入的位置是在C节点前面。F、复制节点
cloneNode(true |false);/l复制节点true完全复制 false节点本身不含子节点注意:复制的元素节点如果节点含id属性必须修改
案例︰
<div id="box">he1lo NodeType !~</div>
<ul id="nav">
first list
<li id="testli" name="7istlist">列表01</1i>
<li id="testlist">列表02</1i>
<li id=“testlist”>列表02</1i>
<li>列表03</1i>
<li>列表04</li>
best list
</ul>
//插入复制节点
function copyInsert({
Var pode=document.getE1ementById(“nav”);
var copyNode = pnode.cloneNode(true);//完全复制
Var inode=document.getElementById(“listlist”);//确定!
pnode.insertBefore(copyNode ,inode);
}
6、删除节点
用来删除父节点中的一个子节点
Pnode.emovechild(DelNode);!l移除子节点
delNode :要删除的目标子节点<button onc1ick="de1Node(">删除节点</button>
//删除节点
function de1Node(){
var pnode = document.getE1ementById("nav");//确定父节点
var de1Node = document.getElementById("listlist");//确定删除的节点
pnode.removeChild(de1Node);//移除子节点
}
- 替换节点
用新节点替换某个子节点
pNode.replaceChild(newNode,oldNode);
//替换节点
//替换节点
function repNode(){
var pNode = document.getElementById("nav");//确定父节点
var oldNode = document.getE1ementById("listlist");
var newNode = document.createE1ement("7i");//创建节点
newNode.innerHTML ="这是新的标准标记";
pNode.replaceChild(newNode , oldNode);//替换节点
5、节点样式
每一个HTML标签都有一个叫style属性,它对应元素对象style,该对象的属性与CSS中的属性名字一—对应。
A、行内样式
语法∶目标结点.style.cssText = "行内样式"
目标结点.style = "行内样式”兼容性不好
注意∶该方式操作行内样式如果没有设置过,不可读取,哪怕有默认样式也不行。
ps∶任何操作样式方法均可使用getComputedStyle()方法取层叠计算后的样式对象如: var widthTest = getComputedStyle(目标节点,null).width;
B、类样式
语法︰目标结点.className= "类样式";
注意:对于class属性必须使用clasName属性名,因为class的保留字。
.teststyle{
color: red;
font-size: 30px;
}
<p id="text">文本内容</p>行内样式
var text = document.getElementById( "text");
text.style = "color : red ; ";
类样式
var text = document.getE lementById( "text");
text.className="teststyle";
CSS属性值和DOM的style属性值之间的映射
HTML中的CSS样式
DOM中的CSS样式
background-color
backgroundColor
background-image
backgroundImage
background-repeat
backgroundRepeat
font-family
fontFamily
font-size
fontSize
font-style
fontStyle
border-style
bordestyle
color
color
text-align
textAlign
cursor
cursor
position
position
top, left, bottom, right
top, left, bottom, right
width, height
width, height
z-index
zlndex
visibility
visibility
overflow
overflow
6、this关键字
this做为实参传入函数中,this指的是当前的节点
this做为实参传入函数中,this指的是当前的节点
1<input type="checkbox" name="a17" οnclick="checkA17(this)"/>全选<br />
1
/全选按钮
2
function checkA17(x){
/ /
或父复选框的选中情况true/false
/ /
flag true选中false未选中var f1ag=x.checked;
6
//获取所有的子复选框
7
var childNode=document.getE1ementsByName("child");
8
for(var i=0; i<childNode. 1ength;i++){
9
childNode[i].checked=flag;
10
11
}
小结
节点操作:访问、属性、创建
( 1)节点的访问:firstChild、lastChild、childNodes、parentChild(父子节)
可以使用元素对象的方法进行代替:getElementByld()、getElementsByTagName()
(2)节点属性的操作:setAttribute()、removeAttribute()、getAttribute()
( 3)节点的创建、删除、追加∶
创建节点:document.createElement(tagName)
复制节点: A.cloneNode(true/false);复制A节点(true完全复制false节点自身)
删除节点(必须父节点下的子节点才能被删除): parentObj.removeChild(nodeobj)
追加节点: parentObj.appendChild(nodeObj);
插入节点: parentObj.insertBefore(new,current) :兄弟节点
上一个兄弟节点
previousElementSibling
下一个兄弟节点
nextElementSibling
第一个兄弟节点
firstNode
最后一个兄弟节点
lastNode
补充︰元素对象的属性
tagName :取一个标记的名称,同nodeName一样;
innerHTML∶指标记对中的HTML文本(含有HTML标记的文本),一般指双边标记;比如︰
二级标题
style :对应HTML标记的style属性;id :对应HTML标记的id属性;
offsetwidth:指元素的宽度,不含滚动条中的内容;
offsetHeight:指元素的高度,不含滚动条中的内容,是只读属性;
javascript的操作DOM的属性相关推荐
- vanilla_如何在Vanilla JavaScript中操作DOM
vanilla by carlos da costa 通过卡洛斯·达·科斯塔 如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Van ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
- element 方法返回的boolean被当成字符串了_13个需要知道的方法:使用 JavaScript 来操作 DOM...
作者:Milos Protic 译者:前端小智 来源:impressivewebs. DOM 或文档对象模型是 web 页面上所有对象的根.它表示文档的结构,并将页面连接到编程语言.它的结构是一个逻辑 ...
- 【前端开发—JavaScript】——BOM/DOM
Bom Browser Object Model 浏览器 对象 模型 浏览器对象模型: 浏览器提供的一系列可以操作浏览器API BOM中的顶级对象 window (全局中的window) + 使用BO ...
- 通过JavaScript简单的操作DOM(一)
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...
- Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- JavaScript操作DOM对象
目录 一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息 二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- Javascript 操作元素Class属性的问题
我在一个Javascript操作Dom元素的class属性改变其样式,使用的方法是首先使用getElementById方法获得Dom元素.然后使用Dom.setAttribute("clas ...
最新文章
- Android 控件架构及View、ViewGroup的测量
- 转: Python集合(set)类型的操作
- OpenStack虚机网卡的创建过程
- nginx配置location总结及rewrite规则写法
- python数组随机分组_Python实用黑科技——以某个字段进行分组
- 深入理解this和call、bind、apply对this的影响及用法
- 【转】urllib urllib2 httplib
- 开发第一个Meeting App
- 超详细图解!【MySQL进阶篇】存储过程,视图,索引,函数,触发器
- android内置t卡中预制资源,[FAQ17514][Recovery]Recovery mode FAQ搜寻指南
- 设计模式的学习(9)外观模式
- 2)Thymeleaf 标准表达式语法详解
- 佳能ir2002g无法扫描到计算机,佳能ir2002g扫描驱动官方版
- 周立功串口服务器维修方法,周立功医生| 告诉你RS485通信的小秘密
- 常见的平面设计风格有哪些?
- matlab符号计算求解正态分布问题
- 关于多元正态分布向量表示的Notation问题
- python 导入的nan怎么解决_如何处理python里的Nan和None
- Object Classification Using CNN-Based Fusion of Vision and LIDAR in Autonomous Vehicle Environment
- Exp7 网络欺诈防范 ————20164316张子遥
热门文章
- 人像分割论文SINet: Extreme Lightweight Portrait Segmentation Networks及其PyTorch实现
- python应用程序无法正常启动怎么办_LOL应用程序无法正常启动怎么办
- 支付宝小程序-上拉加载,下拉刷新
- java画table_画表格 - javawebsoa - 博客园
- C语言【枚举、联合】
- rk3566 Android 11添加自定义service并提供jar包
- Word中删除空白页并保留分节符的方法
- HTMLCSS仿京东首页制作静态页面总结
- C++ access函数所需包含的头文件
- 腾讯云最便宜的云服务器多少钱一年