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 从源 ...

随机推荐

Windows Forms编程实战学习：第二章欢迎使用Visual Studio
第二章欢迎使用Visual Studio 1,AssemblyInfo文件包含程序集的属性,向应用程序添加元数据 [assembly:<attribute>(<setting&g ...
PAT 甲级 1054 The Dominant Color
https://pintia.cn/problem-sets/994805342720868352/problems/994805422639136768 Behind the scenes in t ...
Hibernate 应知应会
Hibernate 的关联关系的配置: 一对一外键约束: 举例子是一个丈夫和妻子:[一个丈夫只能有一位妻子] 表结构: CREATE TABLE `tbl_hus` ( `uuid` ) NOT NU ...
socket与TCP/UDP编程~
ket接口是TCP/IP网络的API,Socket接口定义了许多函数或例程,程序员可以用它们来开发TCP/IP网络上的应用程序.要学Internet上的TCP/IP网络编程,必须理解Socket接口. ...
fiddler启动报错Unable to bind to port [8888]，ErrorCode:10106
启动运行fiddler 报错,提示Unable to bind to port [8888],ErrorCode:10106 解决方式: 使用Fiddler或其他类似的监听工具出现这种错误时, Una ...
【bzoj4027】[HEOI2015]兔子与樱花树形dp+贪心
题目描述很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个树枝连接,我们可以把它 ...
BZOJ4950 Wf2017Mission Improbable（二分图匹配）
先给每个非零格子-1以满足俯视图不变.于是就相当于要求每行每列最大值不变.能减少剩余箱子的唯一方法是在要求相同的行列的交叉处放箱子以同时满足两个需求.给这些行列连边跑二分图匹配即可.注意必须格子初始时 ...
Contest 3
A:非常裸的dp. #include<iostream> #include<cstdio> #include<cstdlib> #include<cstrin ...
Mybatis笔记四：nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'id' in 'class java.lang.String'
错误异常:nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for pr ...
洛谷P2125图书馆书架上的书题解报告
题目描述图书馆有n个书架,第1个书架后面是第2个书架,第2个书架后面是第3个书架……第n-1个书架后面是第n个书架,第n个书架后面是第1个书架,第i个书架上有b[i]本书.现在,为了让图书馆更美观, ...

JS-DOM-随时更新

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

随机推荐

热门专题