javascript 

document.getElementById()

 

<body>
    <div id="time"> 2020-10-2 </div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
    </script>
</body>

//控制台输出：<div id="time"> 2020-10-2 </div>

console.dir(变量) //输出详细内容

document.getElementsByTagName() //返回数组

var divs = document.getElementsByTagName('div');
console.log(divs[0]);

//遍历输出
for (var i=0; i<=10; ++i) {
    console.log(divs[i]);
}

//如何只获取ol里面的<li>：
<body>
	<ul>
		<li>d</li>
		<li>dd</li>
		<li>ddd</li>
		<li>dddd</li>
	</ul>

	<ol id="ol">
		<li>e</li>
		<li>ee</li>
		<li>eee</li>
		<li>eeee</li>
	</ol>

	<script>
		var ol = document.getElementById('ol');
		var lis = ol.getElementsByTagName('li');
		console.log(lis);
	</script>
</body>
document.querySelector('.box')
//通用，类名前加.，id前加#，<>则不加。只返回找到的第一个

document.querySelectorAll()//则返回全部。
//这俩方法只兼容H5
document.body
//获得body标签

document.documentElement
//获得html标签（不能document.html)

常见鼠标事件：

//修改p标签里的内容
（element.innerText)
<p id='fuck'>111</p>
<script>
    var fuck = document.querySelector('#fuck');
    fuck.innerText = '222';
</script>


//但是相比innerText（不识别HTML标签，如加粗<b></b>），innerHTML更强大。且innerText兼容性差。一般用innerHTML
//距离：
fuck.innerHTML = '<b>222</b>'

<div id='aa'> </div>
<script>
    var aa = document.querySelector('#aa');
    aa.className = 'bb';  //可以用来修改css
</script>
element.getAttribute('属性');
//如
element.getAttribute('id');//获取元素id值
//一般用于获取自定义属性
//什么是自定义属性？
//比如<p abcd='1234'></p>
element.setAttribute('属性','值');
//以上一个例子，
element.setAttribute('abcd', '4567');
element.removeAttribute('属性');  //移除属性

 

console.log(xxx.parentNode)
console.log(xxx.childNodes);
xxx.children//不包括文本节点，常用
xxx.firstChild//包括文本节点
xxx.lastChild//包括文本节点

xxx.firstElementChild
xxx.lastElementChild//不包括我文本节点，仅兼容ie9 +

//一般用xxx.children[0]

xxx.nextSibling  //下一个兄弟节点，包括文本节点。
xxx.previousSibling //上一个

xxx.nextElementSibling //下一个兄弟元素节点，即不包括文本节点
xxx.previousElementSibling //上一个，仅兼容ie9 +

//如何让这俩函数兼容？

 

posted @ 2022-07-07 18:46  __ZRH  阅读(89)  评论(0)    收藏  举报