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

随机推荐

Longge's problem（欧拉函数应用）
Description Longge is good at mathematics and he likes to think about hard mathematical problems whi ...
随机生成四则运算式2-NEW+PSP项目计划（补充没有真分数的情况）
PS:这是昨天编写的随机生成四则运算式2的代码:http://www.cnblogs.com/wsqJohn/p/5264448.html 做了一些改进. 补:在上一次的运行中并没有加入真分数参与的运 ...
Python：三元运算
result=值1 if 条件 else 值2 如果条件为真,result=值1 如果条件为假,result=值2 例子: a,b,c=1,3,5 d=a if a>b else c print ...
基础系列（6）—— C#类和对象
一.类介绍类(class)是C#类型中最基础的类型.类是一个数据结构,将状态(字段)和行为(方法和其他函数成员)组合在一个单元中.类提供了用于动态创建类实例的定义,也就是对象(objec ...
软工实践-Alpha 冲刺（8/10）
队名:起床一起肝活队组长博客:博客链接作业博客:班级博客本次作业的链接组员情况组员1(队长):白晨曦过去两天完成了哪些任务描述: 已经解决登录注册等基本功能的界面. 完成非功能的主界面制作 ...
linshi12
#include<iostream> using namespace std; int main(){ int a[50]; a[1]=5; int i; for(i=2;;i++){ a ...
Spring1（）
目的: 降低Java开发的复杂性使用策略: 基于POJO的轻量级和最小侵入式的编程通过依赖注入和面向接口实现松耦合基于切面和惯例进行声明式编程通过切面和模版减少样式代码依赖注入:由Sprin ...
Geek荣耀大会总结
0.0 首先没有被抽中, 其次可乐真难喝,再次我没有去拍无人机合影,再再次还是很受打击的. 1.0 其实对geek 和1024大会无感,主要原因没有三倍加班费的节日在我眼里都不是节日. 上面只是简 ...
elementUI使用本地变量进行验证，监测不到本地变量的变化的问题
对于饿了么组件自定义验证规则,组件库文档已经非常详细了:http://element-cn.eleme.io/#/zh-CN/component/form 我这里将验证中固定的值提取出来使用变量进行保 ...
dat.gui 上手
dat.gui是款神器产品.一个调试利器.但是用起来很简单很简单 1:引用dat.gui.js. 2:实例化 this.gui = new dat.GUI(); 3:创建可设置一个数据对象.例如v ...

JS-DOM-随时更新

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

随机推荐

热门专题