JS-DOM Element方法和属性

S-DOM Element方法和属性
一,获取html元素
1.getElementByID(id)
通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.
example:
<div
id="divid">测试</div>
<script language="javascript">
var
div=document.getElementByID("divid");
alert (div.nodeName);
//显示元素名
</script>
如果id在元素中不是唯一的,那么获得的将是第一个ID.
2.getElementsByName(name)
仅用于input
radio checkbox等元素,返回名字为name的元素数组
example:
<div
name="george"></div>
<input
name="george"></div>
<script language=javascript>
var
ge=document.getElementsByName("george");
alert
(georges.length);  //获取georges个数,对div唔效果
</script>
3.getElementsByTagName(tagname)
返回具有tagname的元素列表数组.处理大的DOM结构会用到它
二,DOM
Element常用方法
1.appendChild(node)  
//增加内容
向当前对象追加节点,example:  
<div
id="test">123</div>
<script type="text/javascript">
var
newdiv=document.createElement("div");
var newtext=document.createTextNode("A
new div");
newdiv.appendChild(newtext)
;
document.getElementById("test").appendChild(newdiv)
;
</script>
当然,上面的功能用document.getElementById("test").innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM.
2,removeChild(childreference)
移除当前节点的子节点,并返回节点
<div
id="father"><div id="child">A
child</div></div>
<script type="text/javascript">
var
childnode=document.getElementById("child");
var
removednode=document.getElementById("father").removeChild(childnode)
</script>
3.cloneNode(deepBoolean)
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.
4,insertBefore(newElment,targetElement)  插入新的节点
在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点.
example:
<body>
<span
id="lovespan">熊掌我所欲也!</span>
</body>
<script
type="text/javascript">
var
lovespan=document.getElementById("lovespan");  //获取id
var
newspan=document.createElement("span"); 
var
newspanref=document.body.insertBefore(newspan,
lovespan);
newspanref.innerHTML="鱼与";
</script>
三,DOM Element常用属性
1、childeNodes  返回所有子节点对象,
例如
<ul
id="mylist">
<li>美国</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var
msg="" ;
var mylist=document.getElementById("mylist")
for (i=0;
i<mylist.childNodes.length; i++){
   var
li=mylist.childNodes[i];
      msg+=li.innerText;
}
alert
(msg);
</script>
2,innerHTML
这是一个标准,但它并不书DOM
例如:
<div
id="bbb"><span id="aaa">我拉</span></div>
<input
type=button  value="点击看看">
<script
language="javascript">
function
change()
{
document.getElementById("aaa").innerHTML=
"修改修改";
}
</script>
3,style
这是一个极其重要的属性,可以获取并修改每个单独的样式.
例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild    返回第一个子节点
lastChild    
返回最后一个子节点
parentNode   返回父节点的对象。
nextSibling  
返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName
返回节点的HTML标记名称，使用英文的大写字母，如P, FONT
5,click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数

JS设置DIV的属性

setAttribute方法:

var a=document.createElement("div");        //新建一个DIV
a.id="div1";     
//给新加的DIV命名
a.style.setAttribute("zIndex",2);    
//设置DIV叠放次序
a.style.setAttribute("textAlign",Dalign);  
//对齐方式
a.style.setAttribute("border","#e6e7e8 1px solid");
//边框颜色
a.style.width=divwidth;      //DIV宽度
a.style.height=Dheight;     
//DIV高度
a.setAttribute("position","absolute");
a.style.backgroundColor=Dbgcolor;     
//DIV背景
a.setAttribute("z-index","2");      //DIV叠放次序
a.style.top =
divtop+"px";      //DIV上边距
a.style.left = divleft+"px";     
//DIV左边距   
a.setAttribute("innerHTML",info10[0].firstChild.data+"<br>"+info11[0].firstChild.data);
document.body.appendChild(a);       //新建DIV结束

隐藏div：document.getElementById（“啊”）.style.display="none"  //block 出现

document.getElementById（“啊”）.style.disabled="true"

document.getElementById（“啊”）.style.readOnly="true"

js获取节点 dom操作

接口

nodeType常量

nodeType值

备注

Element

Node.ELEMENT_NODE

1

元素节点

Text

Node.TEXT_NODE

3

文本节点

Document

Node.DOCUMENT_NODE

9

document

Comment

Node.COMMENT_NODE

8

注释的文本

DocumentFragment

Node.DOCUMENT_FRAGMENT_NODE

11

document片断

Attr

Node.ATTRIBUTE_NODE

2

节点属性

方法

描述

createAttribute()

用指定的名字创建新的Attr节点。

createComment()

用指定的字符串创建新的Comment节点。

createElement()

用指定的标记名创建新的Element节点。

createTextNode()

用指定的文本创建新的TextNode节点。

getElementById()

返回文档中具有指定id属性的Element节点。

getElementsByTagName()

返回文档中具有指定标记名的所有Element节点。

属性

描述

attributes

如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。

childNodes

以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。

firstChild

以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。

lastChild

以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。

nextSibling

以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点

nodeName

节点的名字，Element节点则代表Element的标记名称。

nodeType

代表节点的类型。

parentNode

以Node的形式返回当前节点的父节点。如果没有父节点，则为null。

previousSibling

以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

方法

描述

appendChild()

通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。

cloneNode()

复制当前节点，或者复制当前节点以及它的所有子孙节点。

hasChildNodes()

如果当前节点拥有子节点，则将返回true。

insertBefore()

给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。

removeChild()

从文档树中删除并返回指定的子节点。

replaceChild()

从文档树中删除并返回指定的子节点，用另一个节点替换它。

JS-DOM Element方法和属性的更多相关文章

  1. js DOM Element属性和方法整理

    节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...

  2. js的DOM的方法和属性总结

    1.DOM的获取元素document.getElementById()context.getElementsByTagName(tag) (可以获取相应上下文环境所有的tag标签)context.ge ...

  3. js dom element 属性整理（原创）

    最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...

  4. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

  5. DOM的方法和属性

    HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作. HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值. 编程接口 可通过 JavaScript (以及其他编程 ...

  6. HTML DOM 对象 - 方法和属性

    一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...

  7. BOM的节点方法和属性

    一.HTML DOM >>>>>>>>>>>>>>>>>>>>具体可以参考W3S ...

  8. js element类型的属性和方法整理

    Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 no ...

  9. js Dom对象的属性与方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...

随机推荐

  1. 第十届Mockplus ▪ UXPA用户体验西南赛区决赛成功举行

    九月的重庆,秋意渐浓. 伴随着凉爽的秋风,第十届Mockplus·UXPA国际用户体验创新大赛(UXD Award2018)西南赛区决赛于9月16日下午在四川美术学院-虎溪校区成功举办.来自西南区域各 ...

  2. hive 报错 java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.metastore.HiveMetaStoreClient

    Exception in thread "main" java.lang.RuntimeException: java.lang.RuntimeException: Unable ...

  3. centos_x64 6.4 安装jdk1.7

    1.行到user目录下新建一个java目录 #cd /usr #mkdir java #cd /usr/java/ 2.下载jdk 先从oracle找到要下载的jdk地址然后 wget http:// ...

  4. javabean为什么要实现序列化?

    javabean为什么要实现序列化? 所谓的Serializable,就是java提供的通用数据保存和读取的接口.至于从什么地方读出来和保存到哪里去都被隐藏在函数参数的背后了.这样子,任何类型只要实现 ...

  5. 2018.10.16 NOIP模拟 膜法（组合数学）

    传送门 原题,原题,全TM原题. 不得不说天天考原题. 其实这题我上个月做过类似的啊,加上dzyodzyodzyo之前有讲过考试直接切了. 要求的其实就是∑i=lr(ii−l+k)\sum _{i=l ...

  6. BZOJ 1935 Tree 园丁的烦恼 (树状数组)

    题意:中文题. 析:按x排序,然后用树状数组维护 y 即可. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024000000" ...

  7. 大文件上传插件webupload插件

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  8. MSDN Webcast 跟我一起从零开始学WCF系列课程

    系列课程 >跟我一起从零开始学WCF系列课程   跟我一起从零开始学WCF系列课程(1):WCF概述 (Level 200)   讲 师:徐长龙    课程简介:从 本堂课开始我们将开启一个新的 ...

  9. hdu 5685 Problem A (逆元)

    题目 题意:H(s)=∏i≤len(s)i=1(Si−28) (mod 9973),求一个字符串 子串(a 位到 b 位的)的哈希值.这个公式便是求字符串哈希值的公式,(字符的哈希值 = 字符的ASC ...

  10. SPFA穿越虫洞——负权回路得判断

    poj3259 题目大意:穿越虫洞可以回到过去(时间--)所以能不能让时间倒流呢,就是判断有没有负权回路这次尝试用SPFA算法,也可以复习一下链式前向星 准备工作,队列q,spfa算法得有点就在于这个 ...