JS-DOM-随时更新

DOM里有三种节点：元素节点、文本节点和属性节点

getElmentById(); //id选择器在JS中用此方法来查找获取建议大小写以免不兼容

有时候查找不到 DOM操作必须等到HTML文档加载完毕执行

解决方法1：<script></script>移到</html>后面

2.用onlod事件来解决 window.onload=function(){

//这里存放当页面所以内容加载完毕后，再执行的代码

}

tagName:获取这个元素节点的标签名

innerHTML:获取这个元素节点的纯文本

.....

<body>
<div id="box">测试getElementById</div>
</body>

......

var box=decument.getElementById("box");
alert(box.tagName);

alert(box.innerHTML);

window.onload=function(){

alert(box.id);//获取这个元素节点的ID属性的值

alert(box.title);//获取titlt属性的值

alert(box.style.cocor);//获取style属性对象中color属性的值

alert(box.className);//获取class属性的值

自定义属性bbb="aaa'只有IE可以支持

alert(box.bbb);做兼容操作或不使用

这个是HTML属性的直接调用还有其他方式深入学习后补充

}

----------------------------------------------------------------

.....

<body>
<div id="box">测试getElementById</div>
</body>

......

window,onload=function(){

var box=document.getElementById("box");

box.innerHTML='这里的内容把纯文本内容修改掉了，还能加上样式哦比如加粗';

}

其他方法也可以改比如id

--------------------------------------------------

getElementByTagName()//此方法返回一个对象数组这个数组保存着所有相同元素名的节点列表

.....

</ul>
</body>

......

window.onload=function(){

decument.getElementByTagName("li");

alert(li.length);//返回3 表示li有3个

alert(li[0]);//HTMLLIElement,li的节点对象

alert(li.item(0));//同上

alert(li[0].tagName);//返回第一个li的标签

alert(li[0].innerHTML);//返回第一个li标签的内容

}

怎么获得body节点

window.onload=function(){

var boby=document.getElementsByTagName("body")[0];

alert(body);

}//这是方法之一以后做动态要使用body节点

-------------------------------

window.onload=function(){

var all=document.getElementsByTagName("0");

alert(all.length);

//这是这个HTML文件里所有标签的数量

//但是火狐打开后会自动创建一个div所以多算一个

//IE浏览器会把文档声明页算进去了所以比火狐谷歌多一个

}

PS:比如我div标签里写name value 这是不合法的IE浏览器获取不到这是表单标签

-------------------------------------------------------

getAttribute:获取某个节点的属性

window.onload=function(){

var box=document.getElementById("box");

alert(box.getAttribute('id'));//获取了id节点的对象

alert(box.getAttribute('style'));//非IE获取的是style字符串，IE返回的是对象这里有个不兼容

alert(box.getAttribute('bbb'));//自定义全部兼容了之前的是只有IE兼容

alert(box.getAttribute('class'));//IE无法获取

alert(box.getAttribute('className'));//IE可以获取其他不可以

}

PS:onclick在IE7及以下会返回一个函数式避免使用getAttribute访问HTML属性

alert(box.onclick);.//返回一个函数式

alert(box.getAttribute("onclick"));//IE7及以下会返回函数式非IE返回字符串(就是比如我在div里给onclick赋值了)

-------------------------------------------------------------

setAttribute:给节点赋值

window.onload=function(){

var box=document.getElementById("box");

box.setAttribute('title','哈哈哈');//创建一个属性及属性值

PS：也可以设置居中等样式 IE7及以下 style和onclick没有效果

--------------------------------------------------------------------------

removeAttribute:移除 IE6及以下不支持

window.onload=function(){

var box=document.getElementById("box");

box.removeAttribute('style');//移除了这个样式

--------------------------------------------------------

getElementsClassName:通过类名获取

-----------------------------------------------节点的访问关系是以属性形式存在

获取父节点：节点只有一个父节点 parentNode

</div>

var box1=documentsByClassName("box1")[0];

.log(box1.parentNode);

-------------------------------------------------------

兄弟节点:Sibling

Next:下一个节点

Previous:前一个节点

</div>

console.log(box1.nextElementSibling);//这个box1下一个的节点

节点.nextElementSibling||节点.nextSibling

nextElementSibling:在火狐谷歌IE9指的是下一个元素节点

nextSibling：IE678指下一个元素节点、火狐谷歌IE9+下一个节点包括空文档及换行

PreviousSibling:在IE678中指前一个元素节点（标签）在火狐谷歌IE9以后值得是前一个节点包括空文档和换行

PreviousElementSibling:在火狐IE9值得是前一个元素节点

节点.previousElementSibling||节点.previousSibling

----------------------------------------------------------------

单个子节点

firstChild:调用者是父节点 IE678中指第一个元素节点（标签）在火狐谷歌IE9+之后都指的是第一个节点包括空文档及换行节点

firstElementChild：在火狐谷歌IE9都指的是第一个元素节点

比如console.log(box1.parentNode.firstElementChild);

--------------------------------------------------

所有子节点:

childNodes:指定元素的子元素集合包括换行空文档

children:固定元素的子元素集合不包括换行空文档

子节点数组=父亲节点.childNodes;

子节点数组=父节点.children;//用的最多

console.log(box1.parentNode.children);

----------------------------------------------------------------------

随意得到节点

节点自己.parentNode.chiledren[index]:随意得到兄弟节点------>寻找代码内容可了解

-----------------------------------------------------------------------

重点：节点的操作

创造节点:document.createElement();

插入节点:父亲节点.appendChild();---->父节点的最后插入一个新节点

父亲节点.inserBefore(新节点，参考节点)在参考节点钱插入

删除节点:父亲节点.removeChild(子节点);

不知道父亲节点的情况下，可以写成:node.parentNode.removeChild(node);

复制节点:想要复制节点调用cloneNode()这个函数得到一个新的节点方法内部可以传参如果是true深层复制 false只复制节点本身

新节点=要复制的节点.要复制的节点.cloneNode（参数）;参数可选复制节点

var aaa=box.cloneNode();//只复制一个div

var ccc=box.cloneNode(false);//复制本身和上面一致

var bbb=box.cloneNode(ture);//全复制下来了

------------------------------------------------------------------------

节点的属性操作:eleNode.对象

console.log(eleNode.src);

console.log(eleNode.[title]);//class 都要[]

JS-DOM-随时更新的更多相关文章

vue 改变数据DOM不更新，获取不到DOM的解决方法
1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...
货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题频繁的与dom交互,是一件浪费时间与金钱的 ...
js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
Android 常用的快捷键（随时更新）
android studio 是google出的一款好用不贵的ide,好像是powerd by idea的那个公司,反正风格上差不多.下面是android studio常用的快捷键设置,记录一下自己用 ...
JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
Js DOM 详解
DOM事件类基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
[随时更新][Android]小问题记录
此文随时更新,旨在记录平时遇到的不值得单独写博客记录的细节问题,当然如果问题有拓展将会另外写博客. 原文地址请保留http://www.cnblogs.com/rossoneri/p/4040314. ...
从源码的角度看 React JS 中批量更新 State 的策略（下）
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表深入理解 React JS 中的 setState 从源 ...

随机推荐

IT小小鸟读后感言
有感读了我是一只IT小小鸟之后, 我发现上大学得靠自己自学,确定自己的目标和方向,多去参与实验和自己多锻炼编写程序.我现在大一,还有很多时间来让自己变得更好,虽然要补考两门课程,但是还是不要失去信心 ...
erlang转化中文为url
今天使用http get 方法时,参量中有中文而导致出错. 例如http://abc.com/abc?arg=中文,在erlang使用http:request方法失败. 后来查了url的规范,url中 ...
HDU 2113 Secret Number
http://acm.hdu.edu.cn/showproblem.php?pid=2113 Problem Description 有一天, KIKI 收到一张奇怪的信, 信上要KIKI 计算出给定 ...
jsonFormater之应用
html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
Geek荣耀大会总结
0.0 首先没有被抽中, 其次可乐真难喝,再次我没有去拍无人机合影,再再次还是很受打击的. 1.0 其实对geek 和1024大会无感,主要原因没有三倍加班费的节日在我眼里都不是节日. 上面只是简 ...
Win2019 显示 SMBV1 协议不安全的处理
1. 登录有问题. 报错 [Window Title] \\10.100.1.163 [Content] \\10.100.1.163 因为文件共享不安全,所以你不能连接到文件共享.此共享需要过时的 ...
【Python】第一篇：python基础_1
本篇内容 Python介绍安装第一个程序(hello,world) 变量用户输入(input) 数据类型数据运算 if判断 break和continue的区别 while 循环一. Pyth ...
Graph-Based image segmentation method
1.Graph-Based 方法简介基于图的图像分割方法将图像伪造成带权值无向图的形式 : G = (V, E) 其中,V是顶点集合,把图像中的每个像素或者每个区域看成图的一个顶点:E是边的集合,连 ...
noip模拟题《序》sort
[问题背景] zhx 给他的妹子们排序.[问题描述] zhx有N个妹子,他对第i个妹子的好感度为ai, 且所有ai两两不相等.现在N个妹子随意站成一排,他要将她们根据好感度从小到 ...
AtCoder Regular Contest 083 D: Restoring Road Network
题意有一张无向带权连通图(点数<=300),给出任意两点i,j之间的最短路长度dis[i][j].问是否存在一张这样的无向图.如果不存在输出-1.如果存在输出所有这样的无向图中边权和最小的一张 ...

JS-DOM-随时更新

JS-DOM-随时更新的更多相关文章

随机推荐

热门专题