Dom,JQuery-白红宇

Dom,JQuery

阅读量：5094 次

发布时间：2019-06-13

本文共 4865 字，大约阅读时间需要 16 分钟。

Dom

什么是 DOM？    DOM 是 W3C（万维网联盟）的标准。    DOM 定义了访问 HTML 和 XML 文档的标准：    “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”    W3C DOM 标准被分为 3 个不同的部分：    核心 DOM - 针对任何结构化文档的标准模型    XML DOM - 针对 XML 文档的标准模型    HTML DOM - 针对 HTML 文档的标准模型    DOM 是 Document Object Model（文档对象模型）的缩写。什么是 HTML DOM？    HTML DOM 是：    HTML 的标准对象模型    HTML 的标准编程接口    W3C 标准    HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

HTML DOM 树

Dom

1.帮你找到某个标签

2.进行操作

一、查找元素

1、直接查找

                            
document.getElementById             根据
ID
获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据
class
属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合
         
       

2、间接查找

                            
parentNode          
/
/
父节点
childNodes          
/
/
所有子节点
firstChild          
/
/
第一个子节点
lastChild           
/
/
最后一个子节点
nextSibling         
/
/
下一个兄弟节点
previousSibling     
/
/
上一个兄弟节点
parentElement           
/
/
父节点标签元素
children                
/
/
所有子标签
firstElementChild       
/
/
第一个子标签元素
lastElementChild        
/
/
最后一个子标签元素
nextElementtSibling     
/
/
下一个兄弟标签元素
previousElementSibling  
/
/
上一个兄弟标签元素
         
       

二、操作

1、内容

                            
innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值
         
       

2、属性

                            
attributes                
// 获取所有标签属性
setAttribute(key,value)   
// 设置标签属性
getAttribute(key)         
// 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
         
       

Demo

3、class操作

                            
className                
// 获取所有类名
classList.remove(cls)    
// 删除指定类
classList.add(cls)       
// 添加类
         
       

4、标签操作

a.创建标签

                            
// 方式一
var
tag = document.createElement(
'a'
)
tag.innerText = 
"wupeiqi"
tag.className = 
"c1"
tag.href = 
"http://www.cnblogs.com/wupeiqi"
// 方式二
var
tag = 
"<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
         
       

b.操作标签

                            
// 方式一
var
obj = 
"<input type='text' />"
;
xxx.insertAdjacentHTML(
"beforeEnd"
,obj);
xxx.insertAdjacentElement(
'afterBegin'
,document.createElement(
'p'
))
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var
tag = document.createElement(
'a'
)
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
         
       

5、样式操作

                            
var
obj = document.getElementById(
'i1'
)
obj.style.fontSize = 
"32px"
;
obj.style.backgroundColor = 
"red"
;
         
       

Demo

6、位置操作

                            
总文档高度
document.documentElement.offsetHeight
 
当前文档占屏幕高度
document.documentElement.clientHeight
 
自身高度
tag.offsetHeight
 
距离上级定位高度
tag.offsetTop
 
父定位标签
tag.offsetParent
 
滚动高度
tag.scrollTop
/*
    
clientHeight -> 可见区域：height + padding
    
clientTop    -> border高度
    
offsetHeight -> 可见区域：height + padding + border
    
offsetTop    -> 上级定位标签的高度
    
scrollHeight -> 全文高：height + padding
    
scrollTop    -> 滚动高度
    
特别的：
        
document.documentElement代指文档根节点
*/

test

Demo-滚动固定

Demo-滚动菜单

Demo-滚动高度

7、提交表单

                            
document.geElementById(
'form'
).submit()

8、其他操作

                            
console.log                 输出框
alert                       弹出框
confirm                     确认框
 
// URL和刷新
location.href               获取URL
location.href = 
"url"
重定向
location.reload()           重新加载
 
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器
         
       

三、事件

对于事件需要注意的要点：

this

event

事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容

实例

模态对话框

代码：

点赞：

代码：

效果图如下：

提交表单

输入不能为空。

代码：

    
         提交form表单!!!!!!

JQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

要想使用jQuery首先得导入代码如下（附加简单应用）：

dom也很有用，对于了解jQuery有很大帮助

就可以这么理解:$('这部分是选择').操作(function () {} )

实例

菜单栏：

代码：