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. Sketch小妙招：在线分享设计

    Sketch是很多产品经理.UI.UX设计师常使用的一款的设计工具,但是我在使用Sketch的过程中发现了一个让我困扰的事儿,或者说它缺少了一个我非常需要的服务:在线分享设计.可能很多使用Sketch ...

  2. Bootstrap验证

    <div class="modal fade" id="myModal" tabindex="-1" role="dialo ...

  3. 【JAVA】通过URLConnection/HttpURLConnection发送HTTP请求的方法（一）

    Java原生的API可用于发送HTTP请求 即java.net.URL.java.net.URLConnection,JDK自带的类: 1.通过统一资源定位器(java.net.URL)获取连接器(j ...

  4. 2018.09.08 poj1185 炮兵阵地（状压dp）

    传送门 状压dp经典题. 我们把每一行的状态压成01串. 预处理出每一行可能出现的状态,然后转移每个被压缩的状态的1的个数就行了. 注意当前行转移要考虑前两行的状态. 还要注意只有一行的情况. 代码: ...

  5. 2018.09.08 bzoj4518: [Sdoi2016]征途（斜率优化dp）

    传送门 把式子展开后发现就是要求: m∗(∑i=1msum′[i])−sum[n]2" role="presentation" style="position: ...

  6. spring的IOC/DI功能实践

    一.写在前面: 做这个Demo主要是为了能够更好的理解Spring的原理,看再多的文章,听再多的讲解最终都最好自己去实现一遍,可以将Spring的功能分块实现,最终自然比较容易将各个功能组合起来. 这 ...

  7. Android继承BaseAdapter时要重写的函数的说明

    原文来自:http://www.2cto.com/kf/201405/299601.html,我自己做了一些修改 Android中继承BaseAdapter后需要重写四个函数,但一般还要写一个构造函数 ...

  8. org.springframework spring-test

    需要的jar包 <dependency> <groupId>org.springframework</groupId> <artifactId>spri ...

  9. js基础学习笔记（五）

    多种选择(Switch语句) 当有很多种选项的时候,switch比if else使用更方便. 语法: switch(表达式) { case值1: 执行代码块 1 break; case值2: 执行代码 ...

  10. MySQL性能调优与架构设计——第 17 章 高可用设计之思路及方案

    第 17 章 高可用设计之思路及方案 前言: 数据库系统是一个应用系统的核心部分,要想系统整体可用性得到保证,数据库系统就不能出现任何问题.对于一个企业级的系统来说,数据库系统的可用性尤为重要.数据库 ...