DOM对象1
来源:互联网 发布:网络舆论害死人的事例 编辑:程序博客网 时间:2024/06/03 06:33
DOM:文档对象模型,代表整个HTML页面
获取窗口大小:
document.documentElement.clientWidth/clientHeight 获取当前窗口宽/高,IE与DOM均可使用
document.body.clientWidth/clientHeight body对象宽/高
document.body.offsetWidth/Height 视口(不是窗口,显示HTML页的区域)大小
获取节点:
IE某些节点只能通过name属性值获取,所以最好id与name都写出来,且值一样
注: 节点调用get方法,便相对定位于该节点,只在该节点上下查找相关节点
document.getElementByIdx_xx("节点id"); 根据节点id获取节点,返回节点对象
document.getElementsByTagName_r("标签名"); 根据标签名,获取该标签表示的节点对象数组
document.getElementsByName("name属性值"); 根据name属性值,获取该值表示节点的对象数组.如radio单选框
附: radio的checked属性,选中返回true,否则false
document.getElementsByClassName()
节点属性:
var node=document.getElementByIdx_xx("??");
node.nodeName 节点标签名 如:HTML/BODY/DIV/#text(文本节点名)
node.nodeType 节点类型 1(元素结点) 3(文本结点)
node.nodue 节点文本内容 文本结点返回文本内容(文本内容是文本结点一个属性),元素结点返回null
node.属性名 获取节点指定属性值
node.属性名="?"; 给节点指定属性重新赋值
node.getAttribute("属性名")/setAttribute("属性名","属性值") 获取/重置属性值,但某些浏览器不支持,建议不用
node.parentNode 获取父节点
node.childNodes 获取子节点,返回子节点数组
node.childNodes[i] 直接获取该节点下第i个子节点
node.firstChild/lastChild 获取该节点下第1个/最后1个子节点
node.previousSibling/nextSibling 获取同属一父节点下,该节点的上/下一节点
节点方法:
var ul=document.getElementByIdx_xx("ul.id"); 以一个ul无序列表为例
var li=document.createElement_x("标签名(如li)"); 创建一个指定标签类型的节点
var te=documnet.createTextNode("文本内容"); 创建一个文本节点
ul.appendChild(li); 在ul中追加一个li子节点
ul.insertBefore(li,ul.firstChild); 在第2个参数指定节点前插入第1个参数表示的节点
var _li=li.clone(); 克隆一个新节点.浅层克隆,不能克隆节点下面子节点,clone(true)则完全克隆
ul.removeChild(子节点); 删除该节点下子节点,如果没有该子节点,则会报错
ul.hasChildNodes(); 判断该节点下是否存在子节点.存在返回ture,否则false
innerHTML: MS提出的,所有浏览器支持,但IE的table,select不支持
node.innerHTML="html代码"; 向指定节点开闭标签内填入html代码,然后被执行
node.innerHTML+="html代码"; 若重复执行上面代码,会发生覆盖.+=则实现追加
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>元素~关系</title></head><body> <div id="div_box"><p name="p1">1</p> <p>2</p> <p>3</p> <p class="p4">4</p> <div>5</div> </div> <input type="button" value="TagName" onclick="fun1()"/> <input type="button" value="Name" onclick="fun2()"/> <input type="button" value="fristC" ondblclick="fun4_1()"/> <input type="button" value="childNodes" onclick="fun5()"/> <input type="button" value="parentNode" onclick="fun6()"/> <input type="button" value="parentNode" onclick="fun7()"/> <script type="text/javascript"> function $(hehe){ return document.getElementById(hehe); }//我想找到<p>1</p>的第1种方式getElementsByTagName function fun1(){ var a=document.getElementsByTagName("p")[0]; console.log(a); }//我想找到<p>1</p>的第2种方式getElementsByName function fun2(){ var a=document.getElementsByName("p1")[0]; console.log(a); }//我想找到<p>1</p>的第4种方式firstChild@@@@@(注意)@@@@@@@// div里面的第一个 function fun4(){ var a=$("div_box") var b= a.firstChild; console.log(b); }// div里面的最后一个 function fun4_1(){ var a=$("div_box") var b= a.lastChild; console.log(b); }//我想找到<p>1</p>的第5种方式childNodes@@@@@(注意)@@@@@@@ function fun5(){ var a=$("div_box") var b= a.childNodes[1]; console.log(b); }//找P4的他爸元素 function fun6(){ var a=document.getElementsByClassName("p4")[0]; var b= a.parentNode; console.log(b); }// 找P4的他上面 下面 的元素 function fun7(){ var a=document.getElementsByClassName("p4")[0];// var b= a.previousSibling.previousSibling; var b= a.nextSibling.nextSibling; console.log(b); } </script></body></html>
- DOM对象1
- HTML DOM 教程 - 对象(1)
- DOM文档对象模型(1)
- 1.4.1:jQuery对象和DOM对象
- DOM学习---DOM对象
- DOM对象
- DOM对象
- DOM对象
- DOM对象
- DOM对象
- dom对象
- DOM对象
- DOM 对象
- DOM对象
- DOM对象-
- DOM对象
- DOM对象
- DOM对象
- 晶振
- 优化四步提高网站转化率
- handler之runnable通信
- 函数指针VS函数对象
- 第一个C++上机报告
- DOM对象1
- B. Friends and Presents(Codeforces Round #275(div2)
- 深入了解父类引用指向子类
- python 生成器
- 清除linux密码-适合没基础的
- UVa_540 - Team Queue
- 游戏中使用的反射
- 项目六 穷举法解决组合问题(2)换分币
- Leetcode--Binary Tree Level Order Traversal