dom 基本属性

dom 选择器

1. document.getElementsByTagName(); 根据元素标签获取元素集合
2. document.getElementsByClassName(); 通过class类名获取元素集合
3. document.getElementById(); 通过id获取元素
4. document.getElementsByName(); 通过name属性查找html元素集合 参数为name的值
5. document.querySelectorAll(".box"); querySelectorAll() 返回元素节点集合 参数：元素名字或者 .class css中大部分选择器
6. document.querySelector("#three"); querySelector() 返回元素节点对象

获取元素文本节点

元素.innerHTML //返回当前元素内部所有内容：文本内容 元素组内容
元素.innerText //只返回当前元素的文本内容 低版本ie 不兼容

获取元素属性值

元素.元素的属性
var divId = div.id; //获取id 属性值

更改元素属性值

元素.元素的属性 = “要更改的属性值”
div.className = “changeClassName”;

节点

所有的节点属性都是元素对象下的属性，
使用节点：1、获取元素对象 再获取节点

1. boxNode 当前节点名字
   var boxNode = box.nodeName;

2. 返回上一个元素节点（兄弟之间）
   var pre = box.previousSibling;
   var preEl = box.previousElementSibling;

3. nextElementSibling 返回下一个相邻兄弟元素节点
   var next = box.nextSibling;
   var next1 = box.nextElementSibling;

4. parentElement 返回当前元素的父元素
   var boxParent = box.parentNode;
   var boxParent1 = box.parentElement;

5. children 返回当前元素的子元素
   var boxChild = box.children;
   var boxChild1 = box.childNodes;

6. nextElementSibling 返回下一个相邻兄弟元素节点
   var next = box.nextSibling;
   var next1 = box.nextElementSibling;

创建元素

1. 不常用：
   createAttribute() 创建属性节点 参数为要创建的属性
   attr.value 给属性节点添加值

2. 常用：
   el.setAttribute(str1,str2)作用：给el元素添加属性值
   str1 表示添加的属性节点 类型字符串
   str2 表示给添加属性赋值 类型字符串
   box.setAttribute(“id”,“bbb”);

插入节点

1. 插入子节点：
   el.appendChild(newEl) 将新元素添加到父元素的最后一位；
   el 父元素
   newEl 新元素
   注意 每次添加都必须是一个新元素
   例如：只有一个新元素 执行多次appendChild() 只能添加一次
   wraper.appendChild(div);

2. 在某元素之前插入
   insertBefore(new,node) 作用插入节点
   new 需要插入的元素
   node 表示往哪插
   可以随意插入，也可以作为最后一个子元素插入

删除节点

parentEl.removeChild(el) 删除父元素中的子元素
parentEl 父元素
el 表示删除的内容

替换节点

parentEl.replaceChild(new,old) 替换元素 新元素替换旧元素
new 表示新元素
old 表示旧元素
parentEl 表示父元素，只能替换父元素下的子元素

克隆节点

被克隆元素.cloneNode() 克隆元素 返回克隆结果
true 表示克隆本身加子代
false 只克隆本身 不克隆子代
注意：克隆后会将有ID属性的一起克隆； 克隆后需要改变id值

dom事件

事件作用：完成用户与浏览器之间的交互
交互：用户问 浏览器对用户问的行为做出反应

用户对浏览器做的事件
1、打开窗口加载界面
2、当用户点击页面时
3、当用户移动鼠标时
4、当用户按下某个按键时
5、当用户输入内容时
6、当用户提交html表单时
7、当用户用手指触发按动手机屏幕时
8、当用户再手机上滑动时。。。。
浏览器会对用户的行为做出相应。例如：提示
样式交互
数据交互 等。。。

window事件

onload 当页面开始加载时，触发事件处理函数
window.onload = function(){
alert(“页面开始加载了”);
console.log(“页面加载完毕了”);
}
onresize 监听视图窗口的变化，窗口发生变化时触发事件处理函数
window.onresize = function(){
console.log(“视图窗口变化了”);
}

表单事件

1. onfocus 获取焦点时，触发事件
2. onblur 取消焦点时，触发事件
3. onchange 当表单内容发生改变时候，确认后enter 触发事件
4. onsubmit 是form表单默认的提交事件，会刷新form表单，一般会被阻止

事件对象

事件对象 在触发事件时生成 事件对象
事件对象的作用：记录用户触发事件的所有行为 ， 什么事件 在哪触发 按下哪个按键。手指在手机屏幕上哪里点击等。。。。
事件对象在 事件处理函数中 当用户触发事件时 作为实参传入到事件处理函数
ie 浏览器和其他浏览器事件对象 不同点
ie10 及以下 event 对象 在window下 默认赋值null；触发事件时候在赋值上对象
ie11 谷歌 火狐等 事件对象只有在触发事件时候才能生成

 var btn = document.getElementById("btn");
btn.onclick = function (event) {
// console.log(event);
//做事件对象的兼容性处理,兼容低版本ie
//如果在低版本ie
event = window.event
其他event = e
var event = event || window.event;
console.log(event);
//谁触发事件：target
值为触发事件的元素
console.log(event.target);
//type
表示触发事件类型
console.log(event.type);
//pageX 触发事件的位置
console.log(event.pageX);
}

事件冒泡

 /*
事件冒泡：
当前元素为触发事件元素沿着当前元素往祖籍元素中找，看是否有相同事件，如果有全部触发
直到找到document
为止
*/
var wraper = document.getElementsByClassName("wraper")[0];
var box = document.getElementsByClassName("box")[0];
var child = document.getElementsByClassName("child")[0];
wraper.onclick = function(){
console.log("wraper------");
}
box.onclick = function(){
console.log("box------");
}
child.onclick = function(){
console.log("child------");
}

事件监听

var wraper = document.getElementsByClassName("wraper")[0];
var box = document.getElementsByClassName("box")[0];
var child = document.getElementsByClassName("child")[0];
//addEventListener
监听事件：
//参数1：绑定的事件
去掉on
//参数2：事件处理函数
//参数3：事件流
默认false 表示冒泡
true表示捕获
box.addEventListener("click", function () {
console.log("box-------");
}, true);
wraper.addEventListener("click", function () {
console.log("wraper-------");
}, true);
child.addEventListener("click", function () {
console.log("child-------");
}, true);

事件委托

 //事件：只要用户有行为 就存在事件
//事件绑定：对用户行为的处理
让浏览器做出响应
//事件委托：事件给目标元素添加的，事件是由祖籍元素完成的。
//原理：事件的冒泡行为
//可以提高性能
//target
返回触发事件的目标元素
//srcElment 返回触发事件的元素节点
//在事件委托中：this指向绑定事件的元素
非触发事件的元素
//事件委托使用方式
//给父级元素绑定事件
//子元素触发事件：利用e.target
记录触发事件的元素
完成操作
var ul = document.getElementsByTagName("ul")[0];
var li = document.getElementsByTagName("li");
ul.addEventListener("click",function(e){
console.log(e.target.localName);
console.log(this);
if(e.target.localName === "li"){
e.target.style.color = "red"
}
})

阻止事件默认行为

 //addEventListener
IE低版本 不兼容
wraper.addEventListener("click",function(e){
wraper.style.background = "red"
// e.stopPropagation()
阻止事件冒泡函数
e.stopPropagation();
})
box.addEventListener("click",function(e){
box.style.background = "red"
e.stopPropagation();
})
child.addEventListener("click",function(e){
child.style.background = "red"
e.stopPropagation();
})

阻止冒泡兼容性方法

 /*
stopPropagetion() 阻止事件冒泡；兼容性处理
*/
function stopPropagetion(e){
var event = e || window.event;
if(stopPropagation){
e.stopPropagation();
//其他
}else{
event.cancelBubble = true;
//ie
}
}

阻止默认事件

 btn.onclick = function(e){
//preventDefault()
阻止默认事件（这里是阻止表单的默认提交事件）
e.preventDefault();
console.log(ipt.value);
}
//阻止右键菜单
document.oncontextmenu = function(e){
//方式1
e.preventDefault();
//方式2
//return true;
}

阻止默认行为兼容性

 //preventDefaule()阻止默认事件 兼容函数
//e
接收事件对象 event
function preventDefaule(e){
if(e.preventDefaule){
e.preventDefaule();
//其他
}else{
e.returnValue = false; //IE
}
}

移出事件句柄

//removeEventListener() 作用
删除事件句柄
就是事件处理函数
//1、只能删除
addEventListener()
绑定的事件处理函数
//2、add...
remove...
事件名字相同： 事件处理函数也要相同
btn.addEventListener("click", add);
function add() {
++x;
console.log(x);
if (x > 10) {
btn.removeEventListener("click",add)
}
}
//一个元素可以对多个用户多个事件行为做处理
//一个函数也可以做多个事件的处理函数。
//事件句柄:是完成这个事件中的一部分。包括事件名字和事件处理函数
//添加事件句柄:需要添加事件;事件处理函数
//删除事件句柄;与添加事件的事件名字和事件处理函数名字必须有一致
document.addEventListener("click",add);
document.addEventListener("keydown",add)

事件监听兼容性处理

 var btn = document.getElementById("btn");
//eventListener() 作用：给某个元素绑定某个事件
//el 绑定事件的元素
//ev 绑定的事件
//fn 事件处理函数
function eventListerner(el, ev, fn) {
if (el.addEventListener) { //非IE
el.addEventListener(ev, fn)
} else { // ie 低版本
el.attachEvent('on' + ev, fn)
}
}
eventListerner(btn, "click", a);
function a() {
console.log("我是事件函数");
}

window中滚动条事件

//scrollTop
是dom属性
作用：获取滚动条距离元素顶端的距离
//onscroll
只要滚动条 滚动
触发事件
window.onscroll = function(e){
var event = e || window.event;
console.log(event);
console.log(document.documentElement.scrollTop);
}

最后

以上就是甜蜜外套为你收集整理的dom 基本属性的全部内容，希望文章能够帮你解决dom 基本属性所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。