dom中element的常用属性和方法

最新推荐文章于 2023-11-21 16:00:59 发布

宝寶宝

最新推荐文章于 2023-11-21 16:00:59 发布

阅读量352

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/weixin_43800477/article/details/120287904

版权

getAttribute() 参数为实际元素的属性名，用来获取元素的属性

setAttribute() ：两个参数，第一个参数为要哪个属性设置值，第二个参数为对应的值。removeAttribute() 移除指定的特性

attributes属性，其中包含了一个NamedNodeMap,与NodeList类似

getNamedItem(name) 返回nodeName属性等于name的节点,再访问nodeValue

removeNamedItem(name) 从列表中删除nodeName属性等于name的值

setNamedItem(attrNode) 向属性列表中添加一个属性

item(index) 返回位于数字index位置处的节点

document.createElement() 创建元素，参数为要创建元素的标签名。

onclick 类似的事件处理程序，访问onclick属性时，返回一个javascript函数

children类似于childNodes,返回NodeList对象，但是该对象中仅包含Element对象

firstElementChild 第一个孩子元素

lastElementChild 最后一个孩子元素

nextElementSibling 下一个兄弟元素

previousElementSibling 上一个兄弟元素

childElementCount 子元素的数量，返回值和children.length值相等元素内容

innerHTML 返回元素内容，包括html标签，在使用时，需要注意安全问题，如果假设给了一些不是html标签的内容，可能会造成项目页面的混乱，数据是服务器返回的内容，一定要先检测再使用

innerText 元素内部的文本，去除回车和换行

textContent 元素内部的文本，不去除空格和回车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="a1"></div>
    <ul id="u2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div id="a2">11111</div>
    <script>
        var a1 = document.getElementById('a1');
        //获取html元素属性的方式
        console.log(a1.id);
        console.log(a1.getAttribute('id'));
        //设置html元素属性的方式
        a1.className = 'red';
        a1.setAttribute('class','blue');
        //删除html元素属性
        a1.removeAttribute('class');

        //返回一个包含所有属性的类数组对象
        var attrs = a1.attributes;
        console.log(attrs[0]);
        console.log(attrs.getNamedItem('id').nodeValue);
        //removeNamedItem(name)  从列表中删除nodeName属性等于name的值

        //为a1添加一个class为red的属性
        var a = document.createAttribute('class');
        a.nodeValue = 'red';
        a1.attributes.setNamedItem(a)
        //为a1元素增加一个子元素
        var p = document.createElement('p');
        var t = document.createTextNode('今天天气好');
        p.appendChild(t)
        a1.appendChild(p);
        //$('#a1').append('<p>今天天气好</p>')

        a1.style.backgroundColor='yellow';
        a1.onclick = function(){//当点击时调用函数
            alert('hello');
        }

        var u2 = document.getElementById('u2');
        var child = u2.children;
        u2.firstElementChild.style.backgroundColor='yellow';//第一个孩子节点
        u2.lastElementChild.style.backgroundColor='green';//最后一个孩子节点
        u2.nextElementSibling.style.fontSize = '12px';//下一个兄弟元素节点
        u2.previousElementSibling.style.fontSize = '24px';//上一个兄弟元素节点
        console.log(u2.childElementCount);//5子元素的数量
        console.log(u2.children.length);//5
        console.log(u2.childNodes.length);//11包含空格，结果不准确

        var a2 = document.getElementById('a2');
        a2.innerHTML = '<p>今天天气好</p>'
        //a2.innerText = '<p>今天天气好</p>'
        //a2.textContent = '<p>今天 天气好</p>'
    </script>
</body>
</html>