06第六章 使用DOM操作样式表
js dom操作手册
js dom操作手册JavaScript DOM（Document Object Model）是JavaScript与HTML或XML文档进行交互的接口。
通过DOM，我们可以动态地修改文档的内容、结构和样式。
以下是JavaScript DOM操作的一些主要方面和常用方法：1.获取元素（1）getElementById(id)：通过元素的ID获取元素。
（2）getElementsByClassName(className)：通过类名获取元素列表。
（3）getElementsByTagName(tagName)：通过标签名获取元素列表。
（4）querySelector(selector)：使用CSS选择器获取第一个匹配的元素。
（5）querySelectorAll(selector)：使用CSS选择器获取所有匹配的元素列表。
2.创建元素（1）createElement(tagName)：创建一个新的元素。
（2）createTextNode(data)：创建一个文本节点。
（3）appendChild(node)：将新创建的元素或文本节点添加到现有元素中。
3.修改元素（1）innerHTML：获取或设置元素的HTML内容。
（2）textContent：获取或设置元素的文本内容。
（3）setAttribute(name, value)：设置元素的属性。
（4）removeAttribute(name)：删除元素的属性。
4.事件处理（1）addEventListener(eventType, callback)：为元素添加事件监听器。
（2）removeEventListener(eventType, callback)：从元素移除事件监听器。
5.样式操作style.property：获取或设置元素的CSS样式属性。
例如，element.style.color = 'red'可以设置文本颜色为红色。
dom操作表格示例(dom创建表格)
一、使用HTML标签创建表格：代码如下:<tableborder="1"width="300"><caption>人员表</caption><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td>20</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr></tbody><tfoot><tr><tdcolspan="3">合计：N</td></tr></tfoot></table>thead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个二、使用DOM创建表格<table>标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTMLDOM来操作它。
DOM操作CSS
DOM操作CSS 1、样式表的操作--->var cssRules = document.styleSheets[0].cssRules ||document.styleSheets[0].rules;----E浏览器(rules)，⽽遵循DOM规范的浏览器是使⽤的cssRules。
2、获取最终样式--->IE浏览器为多有的DOM对象提供⼀个currentStyle对象，该对象包含了从元素背景⾊到任何相关CSS规则的style对象的所有属性，通过它我们可以获取某个元素的最终样式。
例：var divEle = document.getElementById("divId");var backgroundColor =divEle.currentStyle.backgroundColor;注：属性是只读的，即不能修改只能读出来---->在遵守DOM规范的浏览器下获取最终样式getComputedStyle()---⼀个是要获取样式的元素----⼀个是伪元素例：var divEle = document.getElementById("divId");var backgroundColor =document.defaultView.getComputedStyle(divEle,null).backgroundColor;//当然也可以这样写//window.getComputedStyle(divEle, null);//显然这样更⽅便，因为window可以不写--->最终样式兼容性处理3、DOM事件--》默认事件1、a标签点击事件<a href="https://">百度</a>2、表单提交事件<form action="https://"><input type="submit" value="submit" /></form>4、注册事件监听器1、通过HTML标签属性注册有html代码如下：<button onclick="execute()">click</button>js代码如下：function execute() {("执⾏js代码");}2、通过DOM属性注册有html代码如下：<button id="btn">click</button>js代码如下：var btnEle = document.getElementById("btn");btnEle.onclick = function() {("执⾏js代码");}----通过dom的onclick属性来注册事件监听器，5、事件捕获、冒泡事件捕获先发⽣，两者可遍历dom中所有的对象，起点和结束点都是document对象。
DOM操作方法
DOM操作方法DOM(Document Object Model)是一种用于处理HTML和XML文档的标准编程接口，它提供了一套API，用于访问和操作页面中的元素。
DOM操作方法是开发者在前端开发中经常使用的一种技术，它可以帮助我们动态地修改页面内容、样式和结构。
本文将介绍一些常用的DOM操作方法。
一、获取元素在进行DOM操作之前，我们首先需要获取到需要操作的元素。
DOM提供了多种方式获取元素，最常用的方法是通过元素的id属性获取。
```javascriptvar element = document.getElementById('elementId');```该方法通过元素的id属性获取到对应的元素，返回一个表示该元素的对象。
通过该对象，我们可以对元素进行后续的操作。
另外，还可以使用以下方法获取元素：- 通过标签名获取元素：```javascriptvar elements = document.getElementsByTagName('tagName');```- 通过类名获取元素：```javascriptvar elements = document.getElementsByClassName('className');```- 通过选择器获取元素：```javascriptvar element = document.querySelector('selector');var elements = document.querySelectorAll('selector');```以上方法分别通过元素的标签名、类名和选择器获取对应的元素，返回一个表示元素的对象或对象集合。
二、修改元素获取到元素后，我们可以使用DOM操作方法修改元素的内容、样式和属性。
1. 修改元素的文本内容```javascriptelement.textContent = '新的文本内容';```通过textContent属性我们可以修改元素的文本内容。
DOM操作表格
DOM操作表格前⾯的话 表格table元素是HTML中最复杂的结构之⼀。
要想创建表格，⼀般都必须涉及表⽰表格⾏、单元格、表头等⽅⾯的标签。
由于涉及的标签多，因⽽使⽤核⼼DOM⽅法创建和修改表格往往都免不了要编写⼤量的代码。
本⽂将详细介绍DOM操作表格的属性和⽅法需求 要通过DOM实现下列格式的表格结构<table border = "1" width = "100%"><tbody><tr><td>Cell 1,1</td><td>Cell 2,1</td></tr><tr><td>Cell 1,2</td><td>Cell 2,2</td></tr></tbody></table>DOMcore 如果通过DOMcore⽅法，则⽅法如下//创建表格var table = document.createElement("table");table.border = "1";table.width = "100%";//创建tbodyvar tbody = document.createElement("tbody");table.appendChild(tbody);//创建第⼀⾏var row1 = document.createElement("tr");tbody.appendChild(row1);var cell1_1 = document.createElement("td");cell1_1.appendChild(document.createTextNode("Cell 1,1"));row1.appendChild(cell1_1);var cell2_1 = document.createElement("td");cell2_1.appendChild(document.createTextNode("Cell 2,1"));row1.appendChild(cell2_1);//创建第⼆⾏var row2 = document.createElement("tr");tbody.appendChild(row2);var cell1_2 = document.createElement("td");cell1_2.appendChild(document.createTextNode("Cell 1,2"));row2.appendChild(cell1_2);var cell2_2 = document.createElement("td");cell2_2.appendChild(document.createTextNode("Cell 2,2"));row2.appendChild(cell2_2);//将表格添加到⽂档主体中document.body.appendChild(table);属性和⽅法 显然DOM代码很长，为了⽅便构建表格，HTML DOM为<table>、<tbody>、<tr>元素添加了属性和⽅法。
JS操作Dom节点之样式
JS操作Dom节点之样式为了提⾼⽤户体验，我们经常会动态修改Dom节点的样式，各种浏览器差异⽐较⼤，我们如何应对？不断尝试，不断总结~！1. style、getComputedStyle、currentStyle内嵌样式：<!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻⾥傻⽓的，完全素颜！</div>1 //内联样式优先级最⾼，通过style获取的样式是最准确的2 var elm = document.getElementById('J-demo');34 //通常这样获取5 elm.style.width6 elm.style.backgroundColor内联样式、外部样式：<!--css--><link ref="stylesheet" href="demo.css"><style>.demo {width: 30px;background-color: #ff6a00;}</style><!--body --><div id="J-demo" class="demo">你想那么容易看我素颜？没那么容易...</div>1var elm = document.getElementById('J-demo'),2 elmStyle;34 elm.style.xxx //只能获取定义的内联样式56//如果标签没有定义相关的内联样式，应该这么办：7 elmStyle = elm.currentStyle ? elm.currentStyle.getAttribute('background-color') : window.getComputedStyle(elm, null).getPropertyValue('background-color'); 89 getPropertyValue(name) //name不要使⽤驼峰命名的名称10 getAttribute(name) //如果考虑该死的IE6， name 必须是驼峰命名的名称1112//为什么不⽤下标[name]来获取属性值呢？13//浏览器对样式属性解释名称不⼀样，⽐如float，有的叫cssFloat，有的叫styleFloat2. screen属性//显⽰器可⽤宽度、⾼度，不包含任务栏availWidth、availHeight//显⽰器屏幕的宽度、⾼度width、height3. 元素视图⽅法、属性1//让元素滚动到可视区域2 scrollIntoView()34//内容区域的左上⾓相对于整个元素左上⾓的位置（包括边框）5 clientLeft6 clientTop78//内容区域的⾼度和宽度，包括padding，不包括边框和滚动条9 clientWidth10 clientHeight1112//相对于最近的祖先定位元素的偏移值13 offsetLeft14 offsetTop1516//返回最近的且定位的祖先元素17 offsetParent1819//offsetParent元素只可能是下⾯这⼏种情况:20//1. <body>21//2. position不是static的元素22//3. <table>, <th> 或<td>，但必须要position: static2324//整个元素的尺⼨（包括边框）25 offsetWidth26 offsetHeight2728//元素滚动的像素⼤⼩,可读可写29 scrollLeft30 scrollTop3132//整个内容区域的宽⾼，包括隐藏部分33 scrollWidth34 scrollHeight35//兼容问题：当外层元素没有设置overflow，但内容超过外层元素宽⾼时，浏览器获取的值将不准确36//解决⽅法：对外层元素设置overflow属性4. ⿏标位置1//⿏标相对于window的偏移2 event.clientX3 event.clientY45//⿏标相对于显⽰器屏幕的偏移坐标6 event.screenX7 event.screenY.Thingking学会这些通⽤的样式处理⽅法，操作Dom样式，制作出漂亮的页⾯style，将会更加得⼼应⼿。
js dom操作手册
js dom操作手册JavaScript DOM操作手册DOM（文档对象模型）是一种用于HTML和XML文档的编程接口。
它提供了对文档的结构、样式和内容的访问和操作方法。
以下是一些常用的DOM操作方法：1. 获取元素：- `document.getElementById(id)`：根据元素的id属性获取元素。
- `document.getElementsByClassName(className)`：根据元素的class属性获取元素集合。
- `document.getElementsByTagName(tagName)`：根据元素的标签名获取元素集合。
- `document.querySelector(selector)`：根据选择器获取匹配的第一个元素。
- `document.querySelectorAll(selector)`：根据选择器获取匹配的所有元素。
2. 创建元素：- `document.createElement(tagName)`：创建指定标签名的元素节点。
- `document.createTextNode(text)`：创建包含指定文本内容的文本节点。
3. 添加、删除和替换元素：- `parentNode.appendChild(node)`：将节点添加到父节点的子节点列表的末尾。
- `parentNode.removeChild(node)`：从父节点的子节点列表中移除指定的节点。
- `parentNode.replaceChild(newNode, oldNode)`：用新节点替换指定的旧节点。
4. 修改元素属性和样式：- `element.setAttribute(name, value)`：设置元素的属性。
- `element.getAttribute(name)`：获取元素的属性值。
- `element.style.property = value`：设置元素的样式属性。
javaScript与Ajax基础_第六章
1 9-1
目标
掌握用DOM操纵样式表的方法 操纵样式表的方法 掌握用
2 9-2
操纵样式表
操纵内联式样式表 操纵外部及内嵌式样式表 操纵最终样式
3 9-3
操纵内联式样式表
Style样式属性 样式属性
– – – – – getProperty(name) getPropertyPriority() Item(index) removeProperty(name) （IE浏览器可能不支持） 浏览器可能不支持） 浏览器可能不支持 setProperty(name,value,priority)（priority 表示优先一般用 （ ‘’表示 并且（ 浏览器也不支持 表示） 浏览器也不支持,可以直接设置属性 ‘’表示）并且（IE浏览器也不支持 可以直接设置属性 top=200px;） ）
4 9-4
操纵外部及内嵌式样式表
document.styleSheets
– cssRules （ FireFox支持） 支持） 支持 – rules （IE支持） 支持） 支持 – style属性 属性
5 9-5
操纵最终样式
IE
– currentStyle – 只读
DOM
– document.defaultView.getComputedStyle(节点，伪元素) document.defaultView.getComputedStyle(节点 伪元素) 节点，
6 9-6
总结操纵内连接式样式表的方源自 操纵内嵌和外部式样式表的方式7 9-7
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第六章使用DOM操作样式表
目标：
使用JavaScript对元素的样式表进行控制
简介
CSS是目前最流行的对页面样式的控制，为了很好的达到一种动态的页面表现效
果，我们这章将学习怎么样用DOM（JavaScript）控制页面的显示。
我们在web基础那本书里有学过，元素的样式分三种，一种是行内样式、一种
是内嵌样式，还有就是公共的外部样式。
在DOM的对样式操作过程中，我们把
行内样式称为内部样式，内嵌样式和外部样式称为外部样式，另外把正在起作用
的样式叫当前样式，接下来我们就这三个样式的操作进行学习。
6.1 用DOM操作内部样式
为了方便操作，XHTML中的每个元素对象都有一个属性对象style，该对象包含
了元素的所有CSS样式。
对于每个CSS样式，style对象都有相关的属性与之对
应，只是格式有所不同：对单个词的CSS样式，style对象用相同的属性名对应
（CSS中的color对应style.color）；对于两个词的样式，style对象用去掉两个
词之间的连接线，并且第二个词的首字母大些的属性名对应（CSS中的
background_color样式对应style.backgroundColor）。
了解这些基本规律后，那我们怎么样用JavaScript改变元素的样式呢？
我们可以看出div中Hello，How are you！文本的背景是red，字体是50px的，
那我们怎么样获取div的背景颜色值、height值和weight值呢？
我们可以通过如下方式获取和改变css的值：
将上面代码加入到html中，当我们点击按钮的时候，就会发现Hello，How are you
的背景颜色和文字大小都改变了。
6.2 用DOM操作外部样式
用前面的方法，我们可以对元素的内部样式可以操作，那外部样式是不是也可以
操作呢？如下代码：
当我们点击toGet 按钮的时候，对话框弹出来是空字符串。
说明上面的方式，没法获取到样式。
原因是现在的div 样式，是通过class 属性指定的，那对于这样的样式，我们应该用什么方式操作呢？
第一步，获取class 样式表的引用
要获取class 样式的引用，我们可以用如下方式获取：
通过如上方式，我们可以获取到所有的rules 集合。
第二步获取rules ，如：
Rule
有个属性selectorText ，我们可以用它来判断是哪个选择器
接下来我们可以操作rule 的
style 对象属性，同前面将的方式一样来改变样式，如：
这样就改变了背景颜色。
只是需要注意，通过这种方式，会把所有引用test 样式的所有元素的样式都改变了。
而前面那种通过修改元素style 的样式只是改变单个元素的样式。
6.3 用DOM 操作最终样式
一个元素可以有多种样式起作用，但真正只有一种样式起最终作用，我们叫这样式叫这元素的最终样式。
IE 浏览器和DOM 标准都有对应的方法获取每个元素的当前样式，如：
IE浏览器直接通过元素的currentStyle属性获取当前样式，而DOM需要调用document.defaultView的getComputedStyle方法获取，该方法带两个参数，第一个参数是需要获取当前样式的元素对象，第二个参数是伪元素，如：hover或：first-letter,如果不需要，第二个参数可以不用输入，直接是null。
获取到当前样式对象后，就可以直接获取样式的所有属性的值。
值得注意的是，当前样式的属性值只读，也就是说只能获取，不能修改。