<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li id="html">html</li>
<li id="css">css</li><li id="js">js</li>
</ul>
<script type="text/javascript">
//访问指定元素
var html = document.getElementById("html"); //通过ID获取对象
html.style.fontWeight = "bold";//改变元素的样式
var arr = document.getElementsByTagName("li"); //通过标签获取对象的集合
alert(arr.length); //共有3个
</script> <script type="text/javascript">
//访问相关的元素
var elm = document.lastChild; //获取文档的最后一个子节点(html)标记
document.write(elm.nodeName + "<br/>"); var body = elm.lastChild; //获取(html)的(最后一个子节点)body标记
document.write(body.nodeName + "<br/>"); //最后一个子节点 var head = elm.firstChild;//获取(html)的(第一个子节点)head标记
document.write(head.nodeName + "<br/>"); //第一个子节点 var ul = body.childNodes[1]; //获取(body)的子节点数组 ul标记
document.write(ul.nodeName+"<br/>");//数组第1个元素的名字 var li1 = ul.childNodes[1]; //获取ul下的子节点数组第一个 li标记
document.write(li1.nodeName + "<br/>");//数组第1个元素的名字 var text1 = li1.nextSibling; //获取li1后一个兄弟节点
document.write(text1.nextSibling.nodeName + "<br/>");//数组第个元素的名字 li //li与li之间必须紧挨着 否则未定义
//默认把换行当成元素; 两次获取兄弟元素
</script> <div id="div1"></div>
<script type="text/javascript">
//追加元素
var div1 = document.getElementById("div1");//当前节点
var newH1 = document.createElement("h1");//创建元素节点(h1标签)
var newText = document.createTextNode("abcdefghijk");//创建文本节点
newH1.appendChild(newText);//将文本节点添加到 (h1中)
div1.appendChild(newH1); //将新建元素节点添加到<div>中 (作为最后一个节点)
</script> <div id="div2">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>
<script type="text/javascript">
//插入元素
var newPara = document.createElement("p");//创建元素节点
var newText = document.createTextNode("新段落");
newPara.appendChild(newText);//将文本节点添加到 p中
var myDiv = document.getElementById("div2"); //获取父节点
var para2 = document.getElementById("p2"); //指定插入位置的节点
myDiv.insertBefore(newPara, para2);//插入指定节点值前 (p2前)
</script> <div id="div3">
<p id="p11">段落11</p>
<p id="p12">段落12</p>
</div>
<script type="text/javascript">
//替换元素
var newH1 = document.createElement("h1"); //创建节点h1
var newText = document.createTextNode("标题1");//创建文本节点
newH1.appendChild(newText);//将文本节点添加到h1节点中
var myDiv = document.getElementById("div3");//获取父节点
var para1 = document.getElementById("p11"); //获取替换的节点
myDiv.replaceChild(newH1,para1); //把段落p11替换为标题1
</script> <div id="div4">
<p id="p21">段落21</p>
<p id="p22">段落22</p>
</div>
<script type="text/javascript">
//删除子节点
var myDiv = document.getElementById("div4");//获取父节点
var para1 = document.getElementById("p21");//指定要删除的节点
myDiv.removeChild(para1);//删除指定的子节点
</script> <div id="div5"></div>
<script type="text/javascript">
//元素的属性与内容操作
var myDiv = document.getElementById("div5");//获取元素对象
myDiv.innerHTML = "<h1>asdfghjk<h1>";//设置元素里面的html内容
myDiv.setAttribute("style","width:380px;height:80px;border:1px solid #000;"); //为元素设置新的属性
</script> <div id="div6"></div>
<div id="div7"></div>
<script type="text/javascript">
//style属性
var myDiv = document.getElementById("div6");
myDiv.style.width = "200px";
myDiv.style.height = "50px";
myDiv.style.border = "1px solid #000";//设置div6的样式
var myDiv1 = document.getElementById("div7");
myDiv1.style = "width:200px;height:50px;border:1px solid #000;background-color:#000"; //设置div7的样式
//javascript不允许在属性或方法名称里使用连字符;例如background-Color; 因此需要调整书写格式backgroundColor;连字符后面用大写
</script> <div id="div8"></div>
<script type="text/javascript">
//className属性
var myDiv = document.getElementById("div8");//获取div8对象
myDiv.className = "a"; //更改样式<div id="div8" class ="a"></div>
myDiv.className = "b"; //更改样式<div id="div8" class ="b"></div>
</script>
</body>
</html>
<script>
(function () { document.getElementsByTagName("body")[].style.cssText = "overflow:hidden"; }) ();
</script>

js DOM 节点树 设置 style 样式属性的更多相关文章

  1. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  3. childNodes遍历DOM节点树

    childNodes遍历DOM节点树 var s = ""; function travel(space,node) { if(node.tagName){ s += space ...

  4. DOM节点树和元素树--深度遍历

    我们在阅读JS高级程序设计的时候,提到了节点树的概念.比如说: elem.parentNode---找elem的父节点: elem.childNodes---找elem的所有的直接子节点: elem. ...

  5. CSS如何设置列表样式属性

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  6. CSS如何设置列表样式属性,看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  7. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  8. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  9. js | javascript获取和设置元素的属性

    获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...

随机推荐

  1. Tensorflow人工智能入门(一)

    前言: 作为一个程序员,已经离开开发岗好多年,最近突然迷茫了,不知道自己何去何从.互联网技术发展的速度已快得难以想象,许久不码代码的手也越来越僵直,需求沟通中的套话和空话却越发的熟练,这和当年入行时的 ...

  2. redis 初学

    1.网站:http://redis.cn/ 2.下载安装和配置 http://www.tuicool.com/articles/aQbQ3u 3.简述redis http://www.jb51.net ...

  3. nyoj_111_分数加减法_201311281341

    分数加减法 时间限制:3000 ms  |           内存限制:65535 KB 难度:2   描述 编写一个C程序,实现两个分数的加减法   输入 输入包含多行数据 每行数据是一个字符串, ...

  4. firedac数据集控件的公共祖先类——TFDAdaptedDataSet

    firedac数据集控件的公共祖先类——TFDAdaptedDataSet TFDQuery = class(TFDCustomQuery)TFDCustomQuery = class(TFDRdbm ...

  5. HYAppFrame(WinForm框架源代码)安装部署指南

    HYAppFrame是一款基于Win form的应用程序框架,包括serverWeb Service.主程序框架.组织架构.权限控制.菜单导航.基础数据.系统參数.日志管理.定时任务等. 项目地址:h ...

  6. PHP array_diff_ukey()

    定义和用法 array_diff_ukey() 返回一个数组,该数组包括了所有出现在 array1 中但是未出现在任何其它参数数组中的键名的值.注意关联关系保留不变.与 array_diff() 不同 ...

  7. HDU 4362

    方程很简单 p[i][j] = min{dp[i-1][k] + |pos[i-1][k] - pos[i][k]|} + v[i][j]; 循环求值肯定TLE,主要是绝对值不方便.好吧,我真的BI了 ...

  8. hdu4289 Control --- 最小割,拆点

    给一个无向图.告知敌人的起点和终点.你要在图上某些点安排士兵.使得敌人不管从哪条路走都必须经过士兵. 每一个点安排士兵的花费不同,求最小花费. 分析: 题意可抽象为,求一些点,使得去掉这些点之后,图分 ...

  9. 学习笔记——SQL SERVER的递归

    SQL SERVER似乎天然具有支持递归的属性. 1.比如说,有几次,我编写或修改存储过程的时候,为图方便,在末尾随手写上 执行这个存储过程 的语句,比如 [sql] view plaincopy A ...

  10. 使用powershell来设置时间

    https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/set-date?view=powers ...