js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式

参考书籍：《JavaScript DOM编程艺术 第2版》
本博客代码的测试页面是：https://www.layui.com/

js dom操作

js 获取元素节点

1. 一份document就是一棵节点树

// 1. 根据元素id名称获取dom, return→对象
document.getElementById('submit_btn')
// 2. 根据元素标签名称获取dom, return→对象数组
document.getElementsByTagName ('ul')
// 3. 根据元素class名称获取dom, return→对象数组
document.getElementsByClassName('menu active’')

js 绑定onclick事件

1. 一个浏览器窗口可以加载某个HTML文档，相对应的，window对象有个属性就是document。当HTML文档全部加载完成时，会触发window对象的onload事件，此时，document对象已经存在了。
2. 用js给某个元素绑定onclick事件，需要确定整个dom都已经加载完成。所以，在用
   <script></script>标签引用的js文件里，需要在onload事件内，给dom绑定onclick事件。

// onload
window.onload = function(){
	// 获取body元素
	var bodyDom = window.document.getElementsByTagName('body')[0];
	var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];
	// 绑定onclick事件
	headerDom.onclick=function(){
		alert('23232')
	}	
};

js 获取属性 修改属性值

// 获取元素
var aDom = document.getElementsByTagName('body')[0].getElementsByClassName('logo')[0];
// 设置元素属性值：src、href、title、disabled等
// 方法1，有限制
aDom.href= 'ww.baidu.com';
// 方法2，可修改任何属性
aDom.setAttribute('href','aaaaa');

// 获取元素属性值
// 方法1
var aDomHref = aDom.href;
// 方法2
aDom.getAttribute('href');

js 动态更新html

如果需要把一大段html内容插入到某个元素中，可以用innerHTML

.building-check-div {
	display: inline-block;
    width: 145px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

var bodyDom = window.document.getElementsByTagName('body')[0];
var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];
var arr = [{id:1,nodeName1:'开盘'},{id:2,nodeName1:'桩基开工'},{id:3,nodeName1:'项目入伙'},{id:4,nodeName1:'竣工验收备案'},{id:5,nodeName1:'工程达到预售条件'}];
var inputHtml = '';
var disabledHtml = '';
for (var i = 0; i < arr.length; i++) {
    // ' <input type="checkbox" class="checkedit" value="' + data + '" οnchange="thischeck(this)">'
     inputHtml += '<div class="building-check-div">';
     inputHtml += '<input type="checkbox" name="buildings" value="'+
         arr[i].id+'" data-id="'+arr[i].id+'" οnchange="" data-name="'+ arr[i].nodeName1 +'" '+disabledHtml+'/>' + arr[i].nodeName1;
     inputHtml += '</div>';
     if((i+1)%4 == 0 && i != 0){
         inputHtml += '<br>';
     }
}
headerDom.innerHTML = inputHtml;

js 创建节点

DOM是文档的表示，在DOM看来，一个文档就是一棵节点树。如果想在节点树上添加标记，就必须插入新的元素节点。

// 1.创建一个新的元素
var pDom = document.createElement('p');
// 2.添加文本
// 方法1-添加文本节点
var textDom = document.createTextNode('下雨了-我是<p></p>元素我在滚动条最下面');
pDom.appendChild(textDom);
// 方法2-修改节点内html的内容
//pDom.innerHTML = '下雨了';

// 3.把这个新元素插入节点树
var bodyDom = window.document.getElementsByTagName('body')[0];
bodyDom.appendChild(pDom); // appendChild 会将新元素添加到最后

js 在已有元素前插入新元素

var bodyDom = window.document.getElementsByTagName('body')[0];
var pDom = document.createElement('p');
var textDom = document.createTextNode('下雨了-我是<p></p>元素我在header前面');
pDom.appendChild(textDom);
bodyDom.insertBefore(pDom,bodyDom.getElementsByClassName('layui-header header header-index')[0]);

js 在已有元素后面插入新元素

/**
 * 在已有元素后面插入新元素
 * @param newDom 新元素
 * @param targetDom 目标元素
 */
function insertAfter(newDom, targetDom){
	var parent = targetDom.parentNode;
	if(parent.lastChild == targetDom){
		parent.appendChild(newDom);
	}else{
		parent.insertBefore(newDom,targetDom.nextSibling);
	}
}

js 获取子元素

// 获取body元素的全部子元素, return→对象数组
document.getElementsByTagName('body')[0].childNodes

// 获取body元素的第一个子元素
// 方法1
document.getElementsByTagName('body')[0].childNodes[0]
// 方法2
document.getElementsByTagName('body')[0].firstChild

// 获取body元素的最后一个子元素
var bodyDom = document.getElementsByTagName('body')[0];
var bodyChildArr = bodyDom.childNodes;
// 方法1
bodyChildArr[bodyChildArr.length - 1]
// 方法2
bodyDom.lastChild

js 阻止a标签默认跳转

在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值将传递给对应的事件处理函数。

当给<a></a>标签添加onclick事件时，让这个处理函数所触发的代码返回false，那么，onclick事件处理函数就认为“这个链接没有被点击”，就可以阻止<a></a>标签的默认跳转行为。

js 节点类型 nodeType

节点类型nodeType共有12中可取值，其中：1-元素节点 2-属性节点 3-文本节点

// 获取body元素的第一个节点的类型, return→int
document.getElementsByTagName('body')[0].childNodes[0].nodeType

js 改变css样式

className属性

可以用追加className的方式，修改元素的class属性。

var bodyDom = window.document.getElementsByTagName('body')[0];
var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];
// 注意，第一个字符是空格
headerDom.className += headerDom.className.indexOf('danger-red') > -1 ? '':' danger-red'
console.log(headerDom.className);

style属性

用element.style的方式，可以改变这个元素的样式。但是，style对象只能返回内联样式，只包含在html代码里用style属性声明的样式，对于在css里定义的样式是获取不到的。

var bodyDom = window.document.getElementsByTagName('body')[0];
var headerDom = bodyDom.getElementsByClassName('layui-header header header-index')[0];
headerDom.style.background = 'red';
// 中间有-的样式属性名，对应为驼峰法名称
headerDom.style.fontSize = '40px';