JS-DOM Element方法和属性
JS-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方法和属性的更多相关文章
- js DOM Element属性和方法整理
节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...
- js的DOM的方法和属性总结
1.DOM的获取元素document.getElementById()context.getElementsByTagName(tag) (可以获取相应上下文环境所有的tag标签)context.ge ...
- js dom element 属性整理（原创）
最近去几家公司面试,发现大多数时候面试的内容考的都是原生的js语法和属性,所以我决心整理一下原生的dom元素的属性. 首先,我我们需要获取一个element元素 <li id="2&q ...
- javascript操作DOM的方法与属性
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...
- DOM的方法和属性
HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作. HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值. 编程接口 可通过 JavaScript (以及其他编程 ...
- HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...
- BOM的节点方法和属性
一.HTML DOM >>>>>>>>>>>>>>>>>>>>具体可以参考W3S ...
- js element类型的属性和方法整理
Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 no ...
- js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; ...
随机推荐
- cnn 反向bp这个地方怎么推导??
- IE浏览器调用jquery需要注意的小问题
今天在进行前端重构的时候发现了一个非常奇怪的浏览器兼容性问题,我想在网页上放一个JS的特效,于是下载了jquery-easyui,经过修改完成所需要的效果后,准备放入项目中,发现在IE浏览器中无法运行 ...
- python操作数据库-安装
首先是下载软件: 链接:http://pan.baidu.com/s/1nvp1imX 密码:6i0x 之后就是一系列设置. 安装教程:自行百度就行.需要注意的是设置my.ini时,需要加上这些东西( ...
- (字典树)How many--hdu--2609
http://acm.hdu.edu.cn/showproblem.php?pid=2609 How many Time Limit: 2000/1000 MS (Java/Others) Me ...
- C++中的关键字用法--- explicit
1. C++中的explicit C++提供了关键字explicit,可以阻止不应该允许的经过转换构造函数进行的隐式转换的发生.声明为explicit的构造函数不能在隐式转换中使用. C++中, 一个 ...
- C++ 引用 指针 使用举例
1. 请看下程序 inline void CScanLineFill::removeOldNodeAET(AET* &aetList, const float yCurrent) { AET* ...
- MFC中开发ocx控件，html容器收不到ocx的事件Event
问题背景: MFC开发ocx控件,主窗口就是ctrl类,主窗口类中调度接口和事件映射添加,执行OK,外部html容器中接收事件成功,如下: ctrl.h中声明事件映射函数 void EVTPENSIG ...
- hdu 4972 根据每轮篮球赛分差求结果
http://acm.hdu.edu.cn/showproblem.php?pid=4972 两支球队进行篮球比赛,每进一次球后更新比分牌,比分牌的计数方法是记录两队比分差的绝对值,每次进球的分可能是 ...
- VCL消息处理机制
http://www.cnblogs.com/railgunman/archive/2010/12/10/1902524.html#2868236 说到VCL中的消息处理就不能不提到TApplicat ...
- 主程序与DLL之间的全局变量问题
http://www.cnblogs.com/railgunman/archive/2010/11/29/1891200.html 主程序与DLL之间的全局变量问题 有几个朋友经常向我问题在DLL ...