JS基础概念整理与简单练习-Part3

DOM相关知识1：

1. 节点(Node)是构成HTML文档的最基本的单元。
2. 常用节点分为四类：

• 文档节点：整个HTML文档
• 元素节点：HTML文档中的HTML标签
• 属性节点：元素的属性
• 文本节点：HTML标签中的文本内容

        

• 节点的属性

        

3. 获取并修改文本节点的属性

        

• <script>得写在下面<button>下面，不然找不到// 因为浏览器在加载一个页面时，是按照自上而下的顺序加载的，读到js时DOM对象还没加载。
• 使用window.onload可以保证整个页面加载完成后再执行。//可以把head里的代码写到window.onload里。
• 但是先加载了js会等等再执行，对性能处理不好。

 

DOM查询-练习2

•  

            

            

•  

            

            

 

 

 

DOM相关知识2：

1. 获取body标签的方法

        // 第一种,像获取其他标签一样
        var body = document.getElementsByTagName("body")[0];
        // 第二种,调用document中的body属性
        var body = document.body;

2. document中的其他属性

        // html根标签        
        var html = document.documentElement;
        // 所有元素
        var all = document.all;
        all = document.getElementsByTagName("*");

3. 根据元素的class属性查询一组元素节点（IE9+）

        document.getElementsByClassName();

4. 根据一个CSS选择器来查询元素节点对象

        document.querySelector();

            

• 使用该方法总会返回第一个元素，且只会返回一个   -->   可用querySelectorAll（返回数组）
• 虽然IE8中没有getElementsByClassName，但可以使用querySelector代替

5. 一些DOM对象方法（都是document.以下方法）

        

6. DOM增删改相关操作--添加新节点的两种方法

            

            

• 但是第二种方法相当于把整个innerHTML重新赋值，所以一般两种方法结合使用。比如：

            

 

 

DOM添加删除记录-练习6

1. 取消标签<a>自动跳转的默认行为：

• 法1：在响应函数内加入return false；
• 法2：写成<a href="javascript:;">；

2. 向<table>里增加新行出现的问题：

           

• 解决方法：加到<table>下面的<tbody>里

            

            

3. 为什么单机响应函数中的this 不等于 allA[i]？

            

• for循环会在页面加载完成后立即执行，而响应函数在超链接被点击时才执行。当响应函数执行时，for循环早已执行完毕。当for循环停止时i=3（共有3个超链接），所以在响应函数中用allA[i]相当于是allA[3]（undefined）。

 

 

使用DOM操作CSS

1. 通过JS修改元素的样式： 元素.style.样式名 = 样式值

            

2. 读取元素的内联样式：元素.style.样式名 

• 通过style属性读取和修改的都是内联样式，无法读取样式表中的样式。

3. 通过JS获取元素当前正在显示的样式： 元素.currentStyle.样式名  // 只有IE浏览器支持，也可元素.currentStyle[样式名]

• 如果当前元素没有设置样式,则获取它的默认值。
• 只读不能修改，要修改只能通过style属性

4. 其他浏览器获取元素当前正在显示的样式： getComputedStyle(元素, null ) .样式名 //是window的方法，也可getComputedStyle(元素, null ) [样式名]

• 需要两个参数：① 获取样式元素   ② 传递一个伪元素，一般都设null
• 该方法会返回一个参数，对象中封装了当前元素对应的样式，可以通过对象.样式名读取样式。

            

• 如果获取的样式没有设置，则会获取到真实值，而不是默认值。
• 比如width:（真实值：335px）（默认值：auto）。
• 该方法不支持IE8及以下浏览器。//正常浏览器支持(排斥IE8)
• 只读不能修改，要修改只能通过style属性

5. 如何兼容：（不用判断浏览器版本获得样式）

            

• 第一种写法虽然可以用，但是不该把兼容问题丢给try-catch处理
• 第二种写法借用了浏览器找不到属性会返回undefined
• 但是一定要写 window.getComputedStyle  而不是getComputedStyle ，因为前者是一个对象的属性（找不到返回undefined ），而后者是变量（找不到就报错）。

            

• undefined转为Boolean值是"false"。
• 注：if-else单结构可以写成三元运算符(? : )，我认为可读性不强

6. 其他样式操作属性

        

• 可见宽度/高度指的是 内容+内边距（content+padding），没有边框
• 该属性不带px，返回的是一个数字可以计算
• 只读不能修改，要修改只能通过style属性

        

• 获取元素整个宽度/高度 （content+padding+border）
• offsetParent可以用来获取当前元素的定位父元素，即box1会获取到离当前元素最近的开启了定位的祖先元素（默认的static不算开启定位）
• 如果均没开启定位，就返回body

            

            

• offsetLeft：当前元素相对于其定位父元素的水平偏移量
• offsetTop：当前元素相对于其定位父元素的垂直偏移量

            

            

• scrollHeight可以获取元素整个滚动区域的高度
• clientHeight可以获取元素整个可视区域的高度
• scrollWeight可以获取元素整个滚动区域的宽度
• scrollLeft可以获得水平滚动条滚动的距离
• scrollTop可以获得垂直滚动条滚动的距离
• 当满足 scrollHeight - scrollTop == clientHeight 时，说明垂直滚动条到底了。

 

 

使用DOM操作CSS -练习1

1. 如果为表单添加disabled="disabled"，则表单项将变成不可用状态

            

            

2. 为了防止scrollTop不是整数，